Reset hidden select value after OnChange event - php

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>

Answer 1

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