选择其他 select 选项时激活 "disabled selected"

Question

当另一个select被选中时，如何让select得到disabled selected的值？

这样做的原因是，当您从任何 select 列表中选择一个选项，然后尝试再次单击同一个选项时，它不会改变（我知道它不会改变，因为实际上你没有改变任何东西，所以我想再次 return 它到默认值所以 on change 会再次工作）。示例：我点击 Blue 然后我点击 30 然后我想再次点击 Blue 但它没有改变，我仍然有 30 代替。我忘了说应该只显示一个结果 (div)。

   $(function() {
   $('.content2').val("");
 
        $('#colorselector').change(function(){
        
        $('.content2').hide();
            $('.colors').hide();
            $('#' + $(this).val()).show();
          //  $('#testL').option.value="";
         // $('#testL').prop("disabled", true);
        });
    });
    
    
     $(function() {
        $('#testL').change(function(){
        $('.colors').hide();
            $('.content2').hide();
            $('#' + $(this).val()).show();
        });
    });

   .content2 {
  display: none;
}
.colors{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
<option value ="" disabled selected > Select </option>
   <option value="red">Red Option</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
</Select>

<div id="red" class="colors"> red... </div>
<div id="yellow" class="colors"> yellow.. </div>
<div id="blue" class="colors"> blue.. </div>

<select name="testL" id="testL">
  <option value ="" disabled selected > Select </option>
  <option value =20>test for 20</option>
  <option value =30>test for 30</option>
</select>
<div id="20" class="content2" > hello 20 </div>
<div id="30" class="content2" > hello 30 </div>

Answer 1

最后我找到了答案，只需添加 $("#testL").val(""); 和 $("#colorselector").val("");（或者如果您想 select 任何其他选项，您可以向 val 添加任何内容). 所以这是更新：

   $(function() {
   $('.content2').val("");
 
        $('#colorselector').change(function(){
        
        $('.content2').hide();
            $('.colors').hide();
            $('#' + $(this).val()).show();
          //  $('#testL').option.value="";
         // $('#testL').prop("disabled", true);
           $("#testL").val("");
        });
    });
    
    
     $(function() {
        $('#testL').change(function(){
        $('.colors').hide();
            $('.content2').hide();
            $('#' + $(this).val()).show();
             $("#colorselector").val("");
        });
    });

   .content2 {
  display: none;
}
.colors{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
<option value ="" disabled selected > Select </option>
   <option value="red">Red Option</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
</Select>

<div id="red" class="colors"> red... </div>
<div id="yellow" class="colors"> yellow.. </div>
<div id="blue" class="colors"> blue.. </div>

<select name="testL" id="testL">
  <option value ="" disabled selected > Select </option>
  <option value =20>test for 20</option>
  <option value =30>test for 30</option>
</select>
<div id="20" class="content2" > hello 20 </div>
<div id="30" class="content2" > hello 30 </div>

选择其他 select 选项时激活 "disabled selected"

Activate "disabled selected" when other select option is picked

javascript

forms

jquery

jquery-events