jquery mobile populate select box from another but clear selection first - ajax

Question

I have two select boxes and second gets updated with GET ajax on first select box selection.
It works cool, but...
If a person made a selection in the fist field (c) it updates field (s) correctly.
When a person made a selection in field (s) but then decide to select another option in (c), field (s) gets updated, but the previous selection of (s) do not clear, even that when it actually does update the options of (s)
What is missing in my code to clear the (s) field when new options are loaded?
<form data-parsley-validate method="post" action="#post1" data-ajax="false" data-theme="<?=$theme?>">
<div class="ui-field-contain ui-body ui-br">
<label for="c">Select Category:</label>
<select name="c" id="c" data-mini="true" placeholder="Select Category" required>
<option value="">Select Category</option>
<?
$ssql="SELECT * FROM cat";
$sresult=mysql_query($ssql);
while($srows = mysql_fetch_array($sresult)){
$cat_id = $srows['id'];
$cat_name = $srows['name'];
echo '<option value="'.$cat_id.'">'.$cat_name.'</option>';
}
?>
</select>
<script>
$(document).ready(function() {
$("#c").selectmenu(); // Initializes
$("#c").selectmenu('refresh', true);
$("#c").change(function() {
$("#s").load("getsub.php?c="+ $("#c").val());
$("#s").selectmenu('refresh', true);
});
})
</script>
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="s">Select Subcategory:</label>
<select name="s" id="s" data-mini="true" placeholder="Select Subcategory" required>
<option value="">Select Subcategory</option>
</select>
</div>
<input type="submit" value="Send" name="submit" data-theme="butt">
</form>

Answer 1

First off, you should not be using .ready() in jQuery Mobile, instead use "Page Events" to add listeners.
To clear selection of an existing selectmenu, you should mark first option as selected and then refresh it.
$(document).on("pagecreate", "#pageID", function () {
$("#c").selectmenu("refresh");
$("#c").on("change", function () {
$("#s").load("getsub.php?c="+ $("#c").val(), function () {
$("#s option:eq(0)").prop("selected", true); /* select first option */
$("#s").selectmenu("refresh"); /* refresh */
});
});
});