jquery不允许从多个选择列表中获取相同的值

我需要确保在其中一个列表中选择了某个值时，不能在其他任何列表中选择该值。这可以用jQuery来完成，还是需要创建一个不允许选择相同值的验证器？jquery不允许从多个选择列表中获取相同的值

我有多个选择列表，只有基本的数字，即

<select id="101_1"> 
    <option value="0">0</option> 
    <option value="1"> 1</option> 
    <option value="2"> 2</option> 
    <option value="3"> 3</option> 
    <option value="4"> 4</option> 
    <option value="5"> 5</option> 
    <option value="6"> 6</option> 
    <option value="7"> 7</option> 
    .... 
    <option value="50"> 50</option> 
</select> 

<select id="101_2"> 
<option value="0">0</option> 
<option value="1"> 1</option> 
<option value="2"> 2</option> 
<option value="3"> 3</option> 
<option value="4"> 4</option> 
<option value="5"> 5</option> 
<option value="6"> 6</option> 
<option value="7"> 7</option> 
    .... 
    <option value="50"> 50</option> 
</select> 

<select id="101_1"> 
    <option value="0">0</option> 
    <option value="1"> 1</option> 
    <option value="2"> 2</option> 
    <option value="3"> 3</option> 
    <option value="4"> 4</option> 
    <option value="5"> 5</option> 
    <option value="6"> 6</option> 
    <option value="7"> 7</option> 
    .... 
    <option value="50"> 50</option> 
</select>

来源

2016-05-13 Pranav Shah

@pedrolobito我很新的这一点，不知道从哪里开始，以便在此之后 http://stackoverflow.com/questions/1280499/jquery-set-select-index –

我选择隐藏选项标签，而不是删除，我建议。这是一个完整的HTML文件。我打算将它发布到jsfiddle上，但由于某种原因，它不起作用。 非常清楚在.change处理程序中复制/粘贴错误。花了一些时间自己想知道为什么它不起作用，但它是一个复制/粘贴错误。

请注意，此代码仅适用于每个选择标签具有相同选项的情况。但是，如果您稍后添加或删除选项，并保持它们同步（如上所述），它就会动态地工作。

如果你需要它与只有一些相同选项的列表一起工作，你将被卡住处理选项上的ID，然后基于该选项工作隐藏/取消隐藏，而不是索引到子项中，但是基本的力学是一样的。

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> 
    <style type="text/css"> 
     .gone {display: none;} 
    </style> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      // hides the option selected in the others 
      var hideValue = function(oldval, val, options, others) { 

       var unhideChild = -1; 
       var hideChild = -1; 
       // find which child to hide in the others 
       // also find the value we change from and unhide it 
       for (var i=1; i<options.length; i++) { 
        var optval = $(options[i]).val(); 
        console.log(optval); 
        if (optval == val) { 
         hideChild = i; 
        } 
        if (optval == oldval) { 
         unhideChild = i; 
        } 
       } 
       if (unhideChild == -1 && oldval != "None") { 
        console.log("uh oh"); 
        return; 
       } 
       if (hideChild == -1 && val != "None") { 
        console.log("uh oh"); 
        return; 
       } 

       // hide them using the passed in selectors 
       for (var j=0; j<others.length; j++) { 
        if (oldval != "None") { 
         console.log("unhiding: " + others[j] + " v: " + unhideChild); 
         $($(others[j]).children()[unhideChild]).removeClass("gone"); 
        } 
        if (val != "None") { 
         console.log("hiding: " + others[j] + " v: " + hideChild); 
         $($(others[j]).children()[hideChild]).addClass("gone"); 
        } 
       } 
      } 

      // we need to keep track of the old values so we can unhide them if deselected 
      var val1 = "None"; 
      var val2 = "None"; 
      var val3 = "None" 

      $('#101_1').change(function() { 
       var opts = $('#101_1').children(); 
       var v = $('#101_1').val(); 
       hideValue(val1, v, opts, ["#101_2", "#101_3"]); 
       val1 = v; 
      }); 
      $('#101_2').change(function() { 
       var opts = $('#101_2').children(); 
       var v = $('#101_2').val(); 
       hideValue(val2, v, opts, ["#101_1", "#101_3"]); 
       val2 = v; 
      }); 
      $('#101_3').change(function() { 
       var opts = $('#101_3').children(); 
       var v = $('#101_3').val(); 
       hideValue(val3, v, opts, ["#101_2", "#101_1"]); 
       val3 = v; 
      }); 
     }); 
    </script> 
</head> 
<body> 

    <select value="None" id="101_1"> 
     <option value="None">None</option> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <select value="None" id="101_2"> 
     <option value="None">None</option> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <select value="None" id="101_3"> 
     <option value="None">None</option> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
</body> 
</html>

此外，如果您需要“无”值不在那里，请将其删除。然后，只需启动选择0选择ta 101_1，选择1选择101_2等，然后确保触发更改处理程序。另外，没有None选项，for循环需要以i = 0开始。

所以基本上这添加到脚本的结尾，并确保VAR我在开始的0而不是1

$('#101_1').val('0'); 
$('#101_2').val('1'); 
$('#101_3').val('2'); 
$('#101_1').trigger('change'); 
$('#101_2').trigger('change'); 
$('#101_3').trigger('change');

来源

2016-05-13 20:43:11 RayfenWindspear

是的确的，我想这个...你有任何我可以遵循创建相同的链接。 –

现在编辑答案以包含代码。 – RayfenWindspear

请注意，没有必要检查任何值是否相同。它们中的任何一个都不可能以相同的值结束（除了“无”特殊情况）。如果您担心这个问题，可以很容易地添加一个检查并重置其中一个，如果它发生的话。 – RayfenWindspear

jquery不允许从多个选择列表中获取相同的值

回答

相关问题