根据按钮重置选择选项

Question

I would like to reset my select options if I click other radio button that doesn't trigger the select div.

Here's my sample:

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

So what I would like to happen, that everytime I choose "dedication button" , the select option will reset to <option disabled selected value>-- Select one --</option> . I don't know what am I missing in my jQuery to trigger that reset event.

Thank you so much in advance!

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

To achieve this you can use val('') to reset the value of the select to it's default. I'd also suggest that you disable the select unless the appropriate radio input is selected so that the user knows an option is required. Try this:

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

try this:

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

and 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

Try this. This will work.

$('#occassion').prop('selectedIndex',0);

Hope this helps!!!