所以我在JavaScript中使用find_select()函数,我希望发生的是,当一个特定的选择选项被更改时,它会重置第一个选项之外的所有其他可能的选择选项。下面是该函数的代码片段以及我想重置其他所有内容的select选项。
function find_select(){
if (document.getElementById("nsp").selected == true){
if (document.getElementById("pre_alerts_yes").selected == true){
document.getElementById('house_form').style.display = 'none';
document.getElementById('nsp_form').style.display = 'block';
document.getElementById('pre_alerts_yes_form').style.display = 'block';
document.getElementById('feedback_form').style.display = 'none';
}
else{
document.getElementById('house_form').style.display = 'none';
document.getElementById('nsp_form').style.display = 'block';
document.getElementById('feedback_form').style.display = 'none';
}
}
else if (document.getElementById("feedback").selected == true)
{
document.getElementById('house_form').style.display = 'none';
document.getElementById('nsp_form').style.display = 'none';
document.getElementById('feedback_form').style.display = 'block';
}
else if (document.getElementById("house").selected == true)
{
document.getElementById('house_form').style.display = 'block';
document.getElementById('nsp_form').style.display = 'none';
document.getElementById('feedback_form').style.display = 'none';
}
else{
document.getElementById('house_form').style.display = 'none';
document.getElementById('nsp_form').style.display = 'none';
document.getElementById('feedback_form').style.display = 'none';
}
}
字符串
HTML代码:
<label for="input_title">Phone Type:</label>
<select name="phone_type" id="select_form" class="input-block-level" onchange="find_select()">
<option id="blank" value="blank"></option>
<option id="house" value="1">House Phone</option>
<option id="nsp" value="2">Normal Cell (Non Smart Phone)</option>
<option id="feedback" value="3">SmartPhone</option>
</select>
型
举一个例子。如果用户选择“家庭电话”,则会基于该选择出现另一个下拉列表,然后他们可以在其中选择某些内容。但是,如果用户改变主意并且想要做比如智能电话,则针对家庭电话打开的选择框然后消失并且针对智能电话的新选择框出现。但是他们为众议院电话选择的选项,现在已经消失了,仍然被选中,并将被张贴。我想重置所有值的基础上,html上面的选择,然后应该确保只有正确的选项被张贴,没有额外的。我发现的例子似乎与我所拥有的不一致。
谢啦,谢啦
4条答案
按热度按时间0aydgbwb1#
您可以使用此功能重置您的选择:
字符串
现在使用函数重置它:
型
你完了!
**提示:**我可以看到你在代码中多次使用
document.getElementById()
。如果你不想使用jQuery来 * 按Id选择元素 *,你可以创建一个这样的函数来多次使用它:型
然后你可以在你的代码中多次使用它,比如:
型
这将保存你的代码,也将帮助你使你的代码美观。:)
zpjtge222#
要清除select的选择,可以将属性selectedIndex设置为0,如下所示:
字符串
编辑:
您可以根据第一个下拉列表的值来命名分组容器(我假设有div),例如使用'div-house'作为第一个组,等等。你也可以将这些div标记为一个通用的类名,例如'select-group'。
像这样:
型
然后,你可以用一种简单的方式来做,就像这样:
型
工作样本如下:http://jsfiddle.net/9pBCX/
nwlqm0z13#
这里有两个简单的例子。您可以查看jquery文档以获得适合您需要的正确属性。
[示例1:] http://jsfiddle.net/Superman/X4ykC/embedded/result/
字符串
[示例2:] http://jsfiddle.net/Superman/XZM5r/embedded/result/
型
wqsoz72f4#
所以我终于想明白了。男人什么痛苦!以下是最终对我起作用的东西,让它像我希望的那样工作:
字符串