在另一個選擇框中選擇時，從一個選擇框中禁用選擇的選項

Question

我有2個位置選擇框和2個顏色框。 我寫了一個jQuery代碼來禁用一個位置選項，如果它是從另一個位置選擇框中選擇的。

我寫的代碼適用於位置框，但是由於某些原因，在最初選擇兩個位置選擇框中的一個選項之后，顏色框中的選項也被禁用。

僅當我第二次嘗試從位置選擇框中選擇一個選項時，才會發生這種情況

這是我的完整代碼。 我做錯了。 謝謝

<div class="pc-row">
    <div class="locations-colors pc-col quote-sizes">
      <h4>Choose location below</h4>
       <label for="location_one"><span>Location</span>
        <select name="location_one" id="location_one">
         <option value="">choose location</option>
         <option value="Full_Chest">Full Chest</option>
         <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
         <option value="Right_Sleeve">Right Sleeve</option>      
        </select></label>

    </div>
    <div class="locations-colors pc-col quote-sizes">
      <h4>Choose number of colors for location</h4>
       <label for="color_one"><span>Number of Colors</span>
        <select name="color_one" id="color_one">
         <option value="">choose colors</option>
         <option value="0">One Color</option>
         <option value="1">Two Colors</option>
         <option value="2">Three Colors</option>
         <option value="3">Four Colors</option>
        </select></label>

    </div>
    </div>

        <div class="pc-row">
    <div class="locations-colors pc-col quote-sizes">
       <label for="location_two"><span>Location</span>
        <select name="location_two" id="location_two">
         <option value="">choose location</option>
         <option value="Full_Chest">Full Chest</option>
         <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
         <option value="Right_Sleeve">Right Sleeve</option>          
        </select></label>

    </div>
    <div class="locations-colors pc-col quote-sizes">
       <label for="color_two"><span>Number of Colors</span>
        <select name="color_two" id="color_two">
         <option value="">choose colors</option>
         <option value="1">One Color</option>
         <option value="2">Two Colors</option>
         <option value="3">Three Colors</option>
         <option value="4">Four Colors</option>
        </select></label>

    </div>
    </div>

和JavaScript

    $('select[name*="location"]').change(function() {
    var selectedOptions = $('select option:selected');
    $('select option').removeAttr('disabled');
    selectedOptions.each(function() {        
        var value = this.value;
        if (value !== ''){           
        var id = $(this).parent('select[name*="location"]').attr('id');
        var options = $('select:not(#' + id + ') option[value=' + value + ']');
        options.attr('disabled', 'true');
        }
    });
}); 

  $('select[name*="location"]').change(function() { var selectedOptions = $('select option:selected'); $('select option').removeAttr('disabled'); selectedOptions.each(function() { var value = this.value; if (value !== ''){ var id = $(this).parent('select[name*="location"]').attr('id'); var options = $('select:not(#' + id + ') option[value=' + value + ']'); options.attr('disabled', 'true'); } }); }); 

 .adult-sizes-box{margin:10px 0}#totalprice{display:none} .quote-sizes li{margin:5px 0 10px}input.amtbox{width:100px;border:1px solid #ccc;vertical-align:middle;float:left}.quote-sizes select{border:1px solid #ccc;font-size:14px} .quote-sizes label {cursor:inherit;display:block;width:100%;overflow:hidden;white-space:nowrap}.quote-sizes label span{font-size:14px;text-align:right;float:left;margin-right:3px;vertical-align:middle;width:120px} .section-title{background:#ddd;padding:10px;font-size:18px}.small-title{font-size:24px;color:#990000} .pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="pc-row"> <div class="locations-colors pc-col quote-sizes"> <h4>Choose location below</h4> <label for="location_one"><span>Location</span> <select name="location_one" id="location_one"> <option value="">choose location</option> <option value="Full_Chest">Full Chest</option> <option value="Full_Back">Full Back</option> <option value="Front_Left_Chest">Front Left Chest</option> <option value="Front_Right_Chest">Front Right Chest</option> <option value="Left_Sleeve">Left Sleeve</option> <option value="Right_Sleeve">Right Sleeve</option> </select></label> </div> <div class="locations-colors pc-col quote-sizes"> <h4>Choose number of colors for location</h4> <label for="color_one"><span>Number of Colors</span> <select name="color_one" id="color_one"> <option value="">choose colors</option> <option value="0">One Color</option> <option value="1">Two Colors</option> <option value="2">Three Colors</option> <option value="3">Four Colors</option> </select></label> </div> </div> <div class="pc-row"> <div class="locations-colors pc-col quote-sizes"> <label for="location_two"><span>Location</span> <select name="location_two" id="location_two"> <option value="">choose location</option> <option value="Full_Chest">Full Chest</option> <option value="Full_Back">Full Back</option> <option value="Front_Left_Chest">Front Left Chest</option> <option value="Front_Right_Chest">Front Right Chest</option> <option value="Left_Sleeve">Left Sleeve</option> <option value="Right_Sleeve">Right Sleeve</option> </select></label> </div> <div class="locations-colors pc-col quote-sizes"> <label for="color_two"><span>Number of Colors</span> <select name="color_two" id="color_two"> <option value="">choose colors</option> <option value="1">One Color</option> <option value="2">Two Colors</option> <option value="3">Three Colors</option> <option value="4">Four Colors</option> </select></label> </div> </div> 

Answer 1

在您的js中， var options = $('select:not(#' + id + ') option[value=' + value + ']'); 是pb，您可以重新初始化var以匹配任何選擇選項，而不僅是用於定位的選項。

因此，只需替換為var options = $('select[name*="location"]:not(#' + id + ') option[value=' + value + ']');

Answer 2

為什么兩個事件相同？ 是否應按照以下代碼進行調整

$('select[name*="location"]').change(function() {
....
});

$('select[name*="color"]').change(function() {
....
});