I am using the code below to hide certain options in my dropdown field.
Was banging my head over why, when I click on the first radio button, it works, but won’t work for the others, then realized I need to reset the drop-down to its original options just after clicking another radio button.
My app has a radio-button group, you click on that group of several radios and based on the value of the radio-button, one of the IF statements below runs.
How do I reset a dropdown field to it’s original or complete contents after using the detach function?
I’ve tried these, but they do not work:
$('#3547').find('option:first').attr('selected', 'selected');
document.getElementById('3547').selectedIndex = 0;
document.getElementById('3547').reset();
Code:
var oldoptions = [];
if (typeVal == "Art")
{
$('fieldset#section-417').show();
thisval = 'Art -';
$("#3547").append(oldoptions);
oldoptions = $("#3547 option:not(:contains(" + thisval + "))").detach();
}
if (typeVal == "Chrome")
{
$('fieldset#section-417').show();
thisval = 'Chrome -';
$("#3547").append(oldoptions);
oldoptions = $("#3547 option:not(:contains(" + thisval + "))").detach();
}
if (typeVal == "Web")
{
$('fieldset#section-417').show();
thisval = 'Web -';
$("#3547").append(oldoptions);
oldoptions = $("#3547 option:not(:contains(" + thisval + "))").detach();
}
re-clarification of functionality needed:
I want to restore all the options that were originally in the dropdown before I filtered some out, so for ex: on load, the dropdown contains 12 options. When the ‘ART’ radio is checked, then only 4 items are displayed in the dropdown. When I click on another radio button “Chrome” for example, I want the original 12 options restored to the dropdown, so the filter code can run again.
Not sure about the surrounding code, but from this snippet you seem to always assign an empty array to
oldoptionsand then append it to the select (i.e. you’re actually appending nothing).