根据按钮重置选择选项

Question

如果我点击其他没有触发选择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中缺少什么来触发重置事件。

提前非常感谢你！

Answer 1

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

    $("#occa_slct option").eq(0).prop("selected", title == "dedi") //set to first option when value of title is dedi
    $("#occa_slct").prop("disabled", title == "dedi") //disable select when value of title is dedi
  });
});

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

Answer 2

要实现此目的，您可以使用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>

Answer 3

试试这个：

    <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="0">-- Select one --</option>
            <option value="otheerrr"> otheerrr </option>
            <option value="other1"> other1 </option>
            <option value="other2"> other2 </option>
        </select>
    </div>

和JS

 $(document).ready(function () {
    $(':radio').on('change', function () {
        $("#occa_slct").val(0);
        $("#occa_slct").change();
        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');
        }
    });
});

Answer 4

试试这个。这会奏效。

$（ '＃occassion'）丙（ '的selectedIndex'，0）;

希望这有帮助!!!