I would like to store the index values of two objects in order to perform a comparison by looping. Currently, I am able to retrieve the index value from the drop-down lists and have a separate script that displays the index number when the dropdown is changed. However, every time I try to modify the script to set a variable for storing the index numbers, I encounter an undefined variable error. I attempted to use functions to recall it, but the issue with the unidentified variable persists. Can anyone provide suggestions on how to save the index numbers of two arrays as variables?
<div id = box1>
<form>
<select id ="bunny">
<option value = "1">United States</option>
<option value = "2">Canada</option>
<option value = "3">France</option>
<option value = "4">Hungary</option>
</select>
</form>
<br>
<form>
<select id ="bunny2">
<option value = "1">Washington, D.C.</option>
<option value = "2">Ottawa</option>
<option value = "3">Paris</option>
<option value = "4">Budapest</option>
</select>
</form>
<script type="text/javascript">
$('select').change(function(){
alert($('option:selected',$(this)).index());
});
</script>