John Higgins John Higgins - 2 months ago 8
HTML Question

Resetting a select input that has a selected option

I have the following code which was supplied via another question that was answered here.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('change', '#no_cage', function() {
if(this.checked) {
document.getElementById("client").reset();
this.checked = true;
}
});
</script>
<form id="client">
<input type="text">
<input id="no_cage" type="checkbox" value="1"> CLEAR
</form>


I now want to include a select input as per the following:

<select name="cage_labor">
<option value="Select Labor" <?php if ($cage_labor=="Select Labor") echo "selected"; ?>>Select Labor</option>
<option value="Non Union" <?php if ($cage_labor=="Non Union") echo "selected"; ?>>Non Union</option>
<option value="Union" <?php if ($cage_labor=="Union") echo "selected"; ?>>Union</option>
</select>


I want the reset form checkbox to ignore the selected option and default to "Select Labor". Any ideas how to achieve this?

Thanks,

John

Answer

I got confused on what you actually want.

If you want to ignore the attribute selected and set to defaultValue:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('change', '#no_cage', function() {
    if(this.checked) {
        document.getElementById("client").reset();
        this.checked = true;
        $("#cage_labor").prop("selectedIndex",0);
    }
});
</script>
<form id="client">
    <input type="text">
    <select name="cage_labor" id="cage_labor">
        <option value="Select Labor">Select Labor</option>
        <option value="Non Union" selected>Non Union</option>
        <option value="Union">Union</option>
    </select>
    <input id="no_cage" type="checkbox" value="1"> CLEAR
</form>

If you want to ignore the whole select input:

When a form resets, it resets everything there is. Like you have done this.checked = true to reassign the value to checkbox; to make it look like reset button ignored the select, all you have to do is, assign value of that select input to a variable and reassign value to select input once the form resetting is complete. Something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('change', '#no_cage', function() {
    if(this.checked) {
        var value = $("#cage_labor").prop("selectedIndex");
        document.getElementById("client").reset();
        this.checked = true;
        $("#cage_labor").prop("selectedIndex",value);
    }
});
</script>
<form id="client">
    <input type="text">
    <select name="cage_labor" id="cage_labor">
        <option value="Select Labor">Select Labor</option>
        <option value="Non Union" selected>Non Union</option>
        <option value="Union">Union</option>
    </select>
    <input id="no_cage" type="checkbox" value="1"> CLEAR
</form>