-
use onchange instead of onclick for select lists.
<select name="history" id="history" onchange="historyChanged(this);"> <option value="history1">history 1</option> <option value="history2">history 2</option> <option value="clearhistory">Clear History</option> </select> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> function historyChanged() { var historySelectList = $('select#history'); var selectedValue = $('option:selected', historySelectList).val(); alert(selectedValue); if (selectedValue == 'clearHistory') { historySelectList.form.submit(); } } $(function() { alert('my alert'); $('select#history').change(historyChanged); }); </script>讨论(0) -
If you want to use
onClickfor option element in Chrome, IE, etc., you must use short fix: setonChangeattribute of select element to"this.options[this.selectedIndex].onclick()"讨论(0) -
Use onChange on the select instead of each option. here is the jsfiddle http://jsfiddle.net/tBjkg/
<select name="history" id="history" onChange="alert(this.value);"> <option value="history1">history 1</option> <option value="history2">history 2</option> <option value="clearhistory">Clear History</option> </select>The alert(this.value) is referring to the value of the option within the select that is currently selected.
讨论(0) -
In some browsers,
choosing same option second time,
no onchange-event throws.
This helps:
<select onchange="alert/*orwhateveryoudowith:*/(this.value);/*but set:*/this.selectedIndex=0"> <option disabled selected>Choose your Plan</option> <option value=1>Plan 1</option> <option value=2>Plan 2</option> <option value=3>Plan 3</option> </select>讨论(0) -
Although the selected solution works, but here is a more clearer and easy way to do this:
<select name="history" id="history" > <option value="history 1">history 1</option> <option value="history 2">history 2</option> <option value="clearhistory">Clear History</option> </select> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#history').on('change', function() { if ( this.value == 'history 1') { alert('h1'); // You can also do anything here } if ( this.value == 'history 2') { alert('h2'); // You can also do anything here } if ( this.value == 'clearhistory') { this.form.submit(); // You can also do anything here } }); }); </script>讨论(0)
加载中...
- 热议问题