2

我想在选择下拉列表的一个固定值时显示复选框列表：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>

但它不起作用。我做错了什么？

4

2 回答 2

3

问题在于getDays您正在使用变量select但未定义。解决方案是在调用 like时传递select实例。onchangeonchange="getDays(this)

另外我认为如果选择了任何其他选项，您可能必须隐藏复选框列表。

<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>

和

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";
    }
}

演示：小提琴

于 2013-05-03T11:48:37.557 回答
0

您可以通过传递选择的值来简化：

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";
        }
    }
于 2013-05-03T12:04:24.947 回答