当选择其他选择下拉列表中的选项时,jQuery显示/隐藏一个选择下拉列表中的选项 [英] jQuery show/hide options from one select drop down, when option on other select dropdown is slected
问题描述
我需要在一个选择下拉列表中显示/隐藏选项,具体取决于另一个选择下拉选项。
I need to show/hide options on one select drop down dependant on another select drop down options.
下面的代码显示了我想要实现的目标。
The code below shows what I am trying to achieve.
如果'column_select'选择菜单选项设置为'1列',则'layout_select'选择菜单必须仅显示'none'选项。
If the 'column_select' select menu option is set to '1 column' then the 'layout_select' select menu must display only the 'none' option.
如果'column_select'选择菜单选项设置为'2列',那么'layout_select'选择菜单必须只显示'layout 1'和'layout 2'选项。
If the 'column_select' select menu option is set to '2 column' then the 'layout_select' select menu must display only the 'layout 1' and 'layout 2' options.
如果'column_select'选择菜单选项设置为'3列',那么'layout_select'选择菜单必须只显示'布局3','布局4'和'布局5'选项。
If the 'column_select' select menu option is set to '3 column' then the 'layout_select' select menu must display only the 'layout 3', 'layout 4' and 'layout 5' options.
<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的新手。如果有人可以请求帮助,将不胜感激。谢谢!
So far everything I have tried has failed abysmally.... I am new to jQuery. If anybody could please help it would be much appreciated. Thanks!
推荐答案
尝试 -
$("#column_select").change(function () {
$("#layout_select").children('option').hide();
$("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})
如果您打算使用此解决方案,则需要隐藏除document.ready函数中的'none'值之外的所有元素。 / p>
If you were going to use this solution you'd need to hide all of the elements apart from the one with the 'none' value in your document.ready function -
$(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'列表完全重置的示例/ 'column_select'列表更改后清除(包括'none'选项) -
I might have got a bit carried away with this, but here's a further example that uses a cache of the original select list options to ensure that the 'layout_select' list is completely reset/cleared (including the 'none' option) after the 'column_select' list is changed -
$(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();
})
演示 - http://jsfiddle.net/N7Xpb/1/
这篇关于当选择其他选择下拉列表中的选项时,jQuery显示/隐藏一个选择下拉列表中的选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!