根据先前的选择禁用选项

时间：2014-07-23 11:58:16

标签： jquery select chained-select

我有四个<select>标签。它们如下：

<select name="" id="a">
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>
<select name="" id="b">
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>
<select name="" id="c">
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>
<select name="" id="d">
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>

这四个应该具有独特的选择，尽管它们具有相同的项目集。所以使用jQuery，如何禁用已经选择的选项？确切地说，我需要从<select>标记中获取四个值。

  

解决方案和问题

     

当前的问题有一个解决方案，但它有一个限制。检查我的答案以获得解决方案。

     

此解决方案无法扩展。如果有四个<select>，则应该有四个变量，并且制作它们的手动过程很繁琐。期待更好的解决方案。

4 个答案:

答案 0 :(得分：1)

如果我有一组已知有限的数据，比如我这里有四个选项，我可以这样做。

伪代码

  1. 禁用所有<select>代码并仅启用第一个代码。
  2. 更改<select>后，启用下一个<select>，并停用当前<select>值的选项。
  3. 将当前<select>的值保存到相应的变量中。
  4. 当下一个<select>更改时，请停用之前的<select>，以便不更改所选的选项。
  5. 其余部分重复一遍，值增加。

    6. jQuery代码

    $(document).ready(function(){
    var a, b, c, d;
    $("#b, #c, #d").prop("disabled", true);
    $("#a").change(function(){
        a = $(this).val();
        $("#b").find('option[value="' + a + '"]').prop("disabled", true);
        $("#b").prop("disabled", false);
    });
    $("#b").change(function(){
        b = $(this).val();
        $("#a").prop("disabled", true);
        $("#c").find('option[value="' + a + '"]').prop("disabled", true);
        $("#c").find('option[value="' + b + '"]').prop("disabled", true);
        $("#c").prop("disabled", false);
    });
    $("#c").change(function(){
        c = $(this).val();
        $("#a").prop("disabled", true);
        $("#b").prop("disabled", true);
        $("#d").find('option[value="' + a + '"]').prop("disabled", true);
        $("#d").find('option[value="' + b + '"]').prop("disabled", true);
        $("#d").find('option[value="' + c + '"]').prop("disabled", true);
        $("#d").prop("disabled", false);
    });
    $("#d").change(function(){
        d = $(this).val();
        $("#a").prop("disabled", true);
        $("#b").prop("disabled", true);
        $("#c").prop("disabled", true);
    });
    $("#reset").click(function(){
        $("#a").prop("disabled", false);
        $("#b, #c, #d").prop("disabled", true);
        $("#a, #b, #c, #d").val(0);
        return false;
    });
});

    此解决方案的问题：

    此解决方案无法扩展。如果有四个<select>，则应该有四个变量，并且制作它们的手动过程很繁琐。期待更好的解决方案。

    小提琴：http://jsfiddle.net/praveenscience/D5ZSk/

答案 1 :(得分：1)

我不确定我是否完全理解您的问题，但您可以这样做：

<强> HTML 

<select>
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>
<select>
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>
<select>
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>

<强> JS 

$(document).ready(function () {
    $("select").on("change", function () {
        // Enable all options
        $("option").prop("disabled", false);

        // Get an array of all current selections
        var selected = [];
        $("select").each(function () {
            selected.push($(this).val());
        });

        // Disable all selected options, except the current showing one, from all selects
        $("select").each(function () {
            for (var i = 0; i < selected.length; i++) {
                if (selected[i] != $(this).val()) {
                    $(this).find("option[value='" + selected[i] + "']").prop("disabled", true);
                }
            }
        });
    });
});

您所做的是将所选选项保存在数组中，并在另一个selects中禁用这些选定的选项。

有关示例，请参阅此 FIDDLE 。

答案 2 :(得分：1)

每次选择更改时，只需遍历每个选项，然后在值匹配的所有其他选择中禁用该选项：

$('select').on('change', function() {

    /* enable any previously disabled options */
    $('option[disabled]').prop('disabled', false);

    /* loop over each select */
    $('select').each(function() {

       /* for every other select, disable option which matches this this.value */
       $('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); 

    });

});

Here's a fiddle

答案 3 :(得分：0)

这是您真正需要数据模型的地方。在幕后，您只需要一个包含项目列表的对象，以及是否选择该项目的bool。然后，每个选项列表将与该列表绑定。如果项目的bool值为false，则每个项目仅显示其列表中的项目。

var allItems = [{item:"eggs",isSelected:false}, 
      {item:"pizza",isSelected:false},
      {item:"cheese",isSelected:false},
      {item:"milk",isSelected:false} ];

所有选项控件都与该列表绑定。 将项目加载到选项控件时，会有javascript检查每个值以查看isSelected是否为false。仅当它为false时，选项控件才会在其列表中显示该项目。

在Angular中这会容易得多。

相关问题
最新问题