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');
        }
    });
});

＆＃13;

	$('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');
        }
    });
});

＆＃13;

.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}

＆＃13;

<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>

＆＃13;

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() {
....
});

在另一个选择框中选中后，从一个选择框中禁用所选选项

2 个答案: