根据按钮重置选择选项

debugcn 发表于 Dev

Khyana

如果我单击其他不触发select div的单选按钮，我想重置我的选择选项。

这是我的示例：

$(document).ready(function() {
  $(':radio').on('change', function() {
    var title = $(this).val(); // Get radio value
    if ($(this).attr('id') === 'theme2') {
      $('.occ_select').addClass('l').removeClass('off');
    } else { //...otherwise status of radio is off
      $('.occ_select').removeClass('l').addClass('off');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br> <input type="radio" id="theme1" name="cake_theme" value="dedi" /> Dedication
<br> <input type="radio" id="theme2" name="cake_theme" value="occ" /> Others

<div id="occassion" class="occ_select off">
  <select name="occassion_select" id="occa_slct">
     <option disabled selected value>-- Select one --</option>
     <option value="otheerrr"> otheerrr </option>
     <option value="other1"> other1 </option>
     <option value="other2"> other2 </option>
 </select>
</div>

因此，我想发生的事情是，每当我选择“奉献按钮”时，选择选项都会重置为<option disabled selected value>-- Select one --</option>。我不知道我在jQuery中缺少什么来触发该重置事件。

提前非常感谢您！

罗里·麦克罗森（Rory McCrossan）

为此，您可以使用val('')将select的值重置为其默认值。我还建议您禁用，select除非选择了适当的单选输入，以便用户知道需要一个选项。试试这个：

$(document).ready(function() {
  $(':radio').on('change', function() {
    var title = $(this).val();
    
    if (this.id === 'theme2') {
      $('.occ_select').addClass('l').removeClass('off');
      $('#occa_slct').prop('disabled', false);
    } else {
      $('.occ_select').removeClass('l').addClass('off');
      
      $('#occa_slct').prop('disabled', true).val(''); // reset value here
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br> 
<input type="radio" id="theme1" name="cake_theme" value="dedi" /> Dedication<br> 
<input type="radio" id="theme2" name="cake_theme" value="occ" /> Others

<div id="occassion" class="occ_select off">
  <select name="occassion_select" id="occa_slct" disabled="disabled">
     <option disabled selected value>-- Select one --</option>
     <option value="otheerrr"> otheerrr </option>
     <option value="other1"> other1 </option>
     <option value="other2"> other2 </option>
 </select>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。