Question

我有三个选择下拉菜单。如果我从一个下拉列表中选择一个选项，则应该从其他两个下拉列表中隐藏该选项。我的代码如下 -

<select name="item_code" id="item_code1">
    <option value="code1">Code1</option>
    <option value="code2">Code2</option>
    <option value="code3">Code3</option>
</select>
<select name="item_code" id="item_code2">
    <option value="code1">Code1</option>
    <option value="code2">Code2</option>
    <option value="code3">Code3</option>
</select>
<select name="item_code" id="item_code3">
    <option value="code1">Code1</option>
    <option value="code2">Code2</option>
    <option value="code3">Code3</option>
</select>

任何人都可以告诉我如何编写一个jquery函数来完成这项工作。这里的选择下拉是动态的，其中没有限制，选择下拉列表只有三个，可能超过三个。

Answer 1

喜欢此演示：http://jsfiddle.net/6qM3F/ 或 http://jsfiddle.net/rJ98a/ 或 http://jsfiddle.net/K36Dm/

*或** http://jsfiddle.net/H8TD3/（显示并隐藏两者）

进一步的想法：

您可以使用.not api隐藏在当前select http://api.jquery.com/not/
你也可以启用禁用，这更有意义。像这样：jQuery - disable/enable select options

休息应符合需要。

<强>代码

$(function () {
    $('select').change(function() {
        $(" option[value='" + $(this).val() + "']").hide();
    });
});

<强>码

$(function () {
    var theValue;
    $('select').focus(function () {
        theValue = $(this).val();
    });
    $('select[name="item_code"]').change(function () {
        $("select[name='item_code'] option[value='" + theValue + "']").show();
        $("select[name='item_code'] option[value='" + $(this).val() + "']").hide();
    });
});

使用jquery从select中隐藏选项

1 个答案: