Reset hidden select value after OnChange event

Question

I have setup a function with jQuery that hides and un-hides related select's after a has changed the first one. The problem is that if a user chooses one value and then changes it to another value in a different relates select then the first one he chose stays selected and they both get submitted with the form. How can I reset the hidden select values if the user changes his mind?

Here's my code:

/*Setup jQuery Function to hide/unhide selects */

<script>        
$(document).ready(function(){
 var $topSelect = $('select[name="dropdownmain"]');
    var $nestedSelects = $('select[name!="dropdownmain"]');
    showApplicableSelect();
    $topSelect.change(showApplicableSelect);

    function showApplicableSelect() {
        $nestedSelects.hide();
        $('select[name="' + $topSelect.val() + '"]').show();
    }
 }); 
</script>


/* Example of the select items and how they are related */


<select class=" form-textbox validate[required]" onChange="change()" name="dropdownmain" id="" title="">    <option selected="selected" value="PLEASE SELECT">PLEASE SELECT</option>
<option value="1">Accommodation and Food Services</option>
<option value="2">Administrative / Support / Waste Management / Remediation Services</option>
<option value="3">Agriculture / Forestry / Fishing / Hunting</option>
<option value="4">Arts / Entertainment / Recreation</option>
<option value="5">Automotive</option>
<option value="6">Construction</option>
<option value="7">Educational Services</option>
<option value="8">Finance and Insurance</option>
<option value="9">Health Care and Social Assistance</option>
<option value="10">Information</option>
<option value="11">Manufacturing</option>
<option value="12">Other</option>
<option value="13">Other Services</option>
<option value="14">Professional / Scientific and Technical Services</option>
<option value="15">Real Estate and Rental and Leasing</option>
<option value="16">Retail Trade</option>
<option value="17">Transportation and Warehousing</option>
</select>
<select class=" form-textbox validate[required]" name="PLEASE SELECT" id="2" title="">     <option value="">   </option> </select>
<select class=' form-textbox validate[required]' name='1' id='' title=''>   <option selected='selected'  value='PLEASE SELECT'>PLEASE SELECT</option>
<option value='1'>Bakery / Cafes</option>
<option value='2'>Bed and Breakfast Inns</option>
<option value='3'>Carryout restaurants</option>
<option value='4'>Casual Dining Restaurant $$-</option>
<option value='5'>Coffee Shop</option>
<option value='6'>Drinking Places (Alcoholic Beverages)</option>
<option value='7'>Fast-food Restaurants</option>
<option value='8'>Fine Dining Restaurant $$$+</option>
<option value='9'>Full Service Restaurant</option>
<option value='10'>Hotels and Motels</option>
<option value='11'>Other food related services</option>
<option value='12'>Travel Agencies</option>
<option value='27'>Other</option>
</select>

http://stackoverflow.com/questions/1033944/what-values-can-appear-in-the-selected-attribute-of-the-option-tag You will need to find the option that has the `selected="selected"` and remove the attribute. https://api.jquery.com/removeAttr/ The answer posted above says that you can just make it 'false' on firefox and safari but W3C stantdard says not the same so better take it off before selecting your new value. Sry, not enough into Jquery to code your snippet but reading those manual you can apply this logic. — Louis Loudog Trottier, Mar 27 '17 at 04:56
see also the last answer here http://stackoverflow.com/questions/8496722/reset-un-select-select-option?rq=1 — Louis Loudog Trottier, Mar 27 '17 at 04:58
Got it. Yes that's what I'm trying to do with jQuery. For some reason the functions that I'm calling using 'OnChange' in the select are not working. I think it's because the are being called from Document Ready. How can I get my function to be called Globally? — Jamey16, Mar 27 '17 at 07:18
really not sure about this but check for eventListener, but looking at your code you could add it to the onChange() function or append a new function after it `onchange="onchage(); anotherFunction();"` hope this helps but js/jquery is far in my memory — Louis Loudog Trottier, Mar 27 '17 at 08:00
I figured out what was going on. My page was calling some javascript that was interfering with my jQuery. I removed that and was then able to use the .change function to reset my sub selects. One important thing that I learned is that if you change the selected value of a hidden select object you must chain the .change() function to it so that it's updated in the browser. Like this: — Jamey16, Mar 28 '17 at 16:27
function testMessage(){ $('[id*="subID"]').val("PLEASE SELECT").change(); }; }) — Jamey16, Mar 28 '17 at 16:27
Also I renamed all of the Sub Select ID's to start with "subID" so that I can use the *= filter to select all of them in jQuery — Jamey16, Mar 28 '17 at 16:29

score 0 · Answer 1 · answered Mar 27 '17 at 09:15

Use jQuery to

reset selected property and
force value to initial value

Code:

$nestedSelects
  .prop("selected", false)
  .val("-1")  // or .val("PLEASE SELECT")
  .hide();

I have updated your HTML dropdown initial value from "PLEASE SELECT" to -1.

<option selected='selected' value='-1'>PLEASE SELECT</option>

jsfiddle
Tested form in w3schools :)

Reset hidden select value after OnChange event

1 Answers1