2

I want to display checkbox list on selecting one fix value of dropdown list: javascript:

function getDays(){
        var selectedString = select.options[select.selectedIndex].value;
        if(selectedString == 4)
        {
            document.getElementById("days_target").style.display = "block";
        }
    }

Html:

<b>Please enter days required</b><br/>
        <select name="days" id="days" style="width:200px;" onchange="getDays()">
            <option value="0">Select</option>
            <option value="1">Mon-Fri</option>
            <option value="2">Mon-Fri</option>
            <option value="3">Mon-Fri</option>
            <option value="4">Bespoke Days</option>
        </select><br/><br/>
        <div id="days_target" style="display:none;">
            <input type="checkbox" name="day" value="mon">Mon &nbsp;&nbsp; <input type="checkbox" name="day" value="tue">Tue<br/>
            <input type="checkbox" name="day" value="wed">Wed &nbsp;&nbsp; <input type="checkbox" name="day" value="thr">Thr<br/>
            <input type="checkbox" name="day" value="fri">Fri &nbsp;&nbsp; <input type="checkbox" name="day" value="sat">Sat<br/>
            <input type="checkbox" name="day" value="sun">Sun<br/><br/>
        </div>

but it doesn't work.what I am doing wrong?

2 Answers 2

3

The problem is in getDays you are using a variable select but it is not defined. Solution is to pass the select instance when the onchange is called like onchange="getDays(this).

Also I think you may have to hide the checkbox list if any other option is selected.

<b>Please enter days required</b><br/>
<select name="days" id="days" style="width:200px;" onchange="getDays(this)">
    <option value="0">Select</option>
    <option value="1">Mon-Fri</option>
    <option value="2">Mon-Fri</option>
    <option value="3">Mon-Fri</option>
    <option value="4">Bespoke Days</option>
</select><br/><br/>
<div id="days_target" style="display:none;">
    <input type="checkbox" name="day" value="mon"/>Mon &nbsp;&nbsp; <input type="checkbox" name="day" value="tue"/>Tue<br/>
    <input type="checkbox" name="day" value="wed"/>Wed &nbsp;&nbsp; <input type="checkbox" name="day" value="thr"/>Thr<br/>
    <input type="checkbox" name="day" value="fri"/>Fri &nbsp;&nbsp; <input type="checkbox" name="day" value="sat"/>Sat<br/>
    <input type="checkbox" name="day" value="sun"/>Sun<br/><br/>
</div>

And

function getDays(select){
    var selectedString = select.options[select.selectedIndex].value;
    if(selectedString == 4)
    {
        document.getElementById("days_target").style.display = "block";
    }else {
        document.getElementById("days_target").style.display = "none";
    }
}

Demo: fiddle

Sign up to request clarification or add additional context in comments.

Comments

0

You can simplify by passing the value of the select:

html:

<b>Please enter days required</b><br>
        <select name="days" id="days" style="width:200px;" onchange="getDays(this.value)">
            <option value="0">Select</option>
            <option value="1">Mon-Fri</option>
            <option value="2">Mon-Fri</option>
            <option value="3">Mon-Fri</option>
            <option value="4">Bespoke Days</option>
        </select><br><br>
        <div id="days_target" style="display:none;">
            <input type="checkbox" name="day" value="mon">Mon &nbsp;&nbsp; <input type="checkbox" name="day" value="tue">Tue<br>
            <input type="checkbox" name="day" value="wed">Wed &nbsp;&nbsp; <input type="checkbox" name="day" value="thr">Thr<br>
            <input type="checkbox" name="day" value="fri">Fri &nbsp;&nbsp; <input type="checkbox" name="day" value="sat">Sat<br>
            <input type="checkbox" name="day" value="sun">Sun<br><br>
        </div>

js:

function getDays(value){
        if(value == 4)
        {
            document.getElementById("days_target").style.display = "block";
        }
        else
        {
            document.getElementById("days_target").style.display = "none";
        }
    }

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.