Question

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

但它没有用。我做错了什么？

Answer 1

问题出在getDays您正在使用变量select，但未定义。解决方案是在select调用onchange时传递onchange="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";
    }
}

演示：fiddle

Answer 2

您可以通过传递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";
        }
    }

显示选择下拉列表值的复选框列表

2 个答案: