I have 2 select boxes. I want to manipulate the other box based on the option selected in the first box.
<select name="abc" id="abc">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
And second select box
<select name="xyz" id="xyz">
<option value="1">X</option>
<option value="2">Y</option>
<option value="3">Z</option>
</select>
<br>
Now what I want is, when the page loads, if I select option 1 ie A, the second check box should automatically be set to option 3 ie Z and vice versa. If I select option 2 ie B in first selectbox, second select box should display option 1 ie X and vice versa, and so on. What jquery function to use?
You can do simply something like this, using change()
event handler
var $select = $('#abc,#xyz'); $select.change(function() { $select.val(this.value); }).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select name="abc" id="abc"> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> <select name="xyz" id="xyz"> <option value="2">X</option> <option value="3">Y</option> <option value="1">Z</option> </select>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.