Apologies for the confusion with the title of this section.
I want to hide certain select options until a user selects a specific button. Once a button is selected, I want the corresponding select field to remain visible. However, if the user chooses a different button, I want to reset the previously selected options and hide them again.
$(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 {
$('.occ_select').removeClass('l').addClass('off');
}
$("#occa_slct option").eq(0).prop("selected", title == "dedi")
$("#occa_slct").prop("disabled", title == "dedi")
});
});
$(document).ready(function() {
$(':radio').on('change', function() {
var title = $(this).val();
if ($(this).attr('id') === 'shape1') {
$('.c_select').addClass('l').removeClass('off');
} else {
$('.c_select').removeClass('l').addClass('off');
}
$("#c_slct option").eq(0).prop("selected", title == "heart")
$("c_slct").prop("disabled", title == "heart")
});
});
$(document).ready(function() {
$(':radio').on('change', function() {
var title = $(this).val();
if ($(this).attr('id') === 'shape2') {
$('.h_select').addClass('l').removeClass('off');
} else {
$('.h_select').removeClass('l').addClass('off');
}
$("#h_slct option").eq(0).prop("selected", title == "circle")
$("h_slct").prop("disabled", title == "circle")
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
Choose Theme:
<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>
<hr>
Choose Shape:
<br> <input type="radio" id="shape1" name="shape" value="circle" /> Circle
<div id="circle" class="circle_select off">
<select name="c_select" id="c_slct">
<option disabled selected value>-- Select one --</option>
<option value="big"> big </option>
<option value="med"> med </option>
<option value="small"> small </option>
</select>
</div>
<br> <input type="radio" id="shape2" name="shape" value="heart" /> Heart
<div id="heart" class="heart_select off">
<select name="h_select" id="h_slct">
<option disabled selected value>-- Select one --</option>
<option value="big"> big </option>
<option value="med"> med </option>
<option value="small"> small </option>
</select>
</div>
<hr>It seems there may be some confusion or a bug occurring in this section. Feel free to reach out if you need clarification on my request. Thank you in advance for any help provided!