我需要在一个选择下拉菜单上显示/隐藏选项,具体取决于另一个选择下拉选项.
如果’column_select’选择菜单选项设置为’1列’,那么’layout_select’选择菜单只能显示’none’选项.
如果“column_select”选择菜单选项设置为“2列”,则“layout_select”选择菜单只能显示“布局1”和“布局2”选项.
如果“column_select”选择菜单选项设置为“3列”,则“layout_select”选择菜单只能显示“布局3”,“布局4”和“布局5”选项.
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="col1">none</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
到目前为止,我所尝试的一切都失败了…我是jQuery的新手.如果任何人可以请帮助它将不胜感激.谢谢！
解决方法
尝试 –
$("#column_select").change(function () {
$("#layout_select").children('option').hide();
$("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})
如果你要使用这个解决方案,你需要隐藏所有的元素,除了你的document.ready函数中的“none”值之外.
$(document).ready(function() {
$("#layout_select").children('option:gt(0)').hide();
$("#column_select").change(function() {
$("#layout_select").children('option').hide();
$("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})
})
演示 – http://jsfiddle.net/Mxkfr/2
编辑
我可能已经有了这个,但这里还有一个例子,使用原始选择列表选项的缓存来确保’layout_select’列表完全重置/清除(包括’none’选项) column_select’列表已更改 –
$(document).ready(function() {
var optarray = $("#layout_select").children('option').map(function() {
return {
"value": this.value,"option": "<option value='" + this.value + "'>" + this.text + "</option>"
}
})
$("#column_select").change(function() {
$("#layout_select").children('option').remove();
var addoptarr = [];
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#layout_select").html(addoptarr.join(''))
}).change();
})
