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不允許從多個選擇列表中獲取相同的值

回答

相關問題