Issue: I have a dropdown with a list of years in it with nothing selected, the user selects \"1976\", I run a function. If the user clicks on the dropdown again and selects
mouseup event should do the trick:
$('select').mouseup(function(){
console.log("hue");
});
http://jsfiddle.net/5Fcgr/
note that this will be triggered twice when a new value is selected in the listbox. Once when opening the options, and once when selecting an option.
Simple JS
---------
<html>
<head>
<script>
var prevIndex = "";
function onSelect()
{
var currIndex = document.getElementById("ddList").selectedIndex;
if( currIndex > 0 )
{
if( prevIndex != currIndex )
{
alert("Selected Index = " + currIndex);
prevIndex = currIndex;
}
else
{
prevIndex = "";
}
}
}
</script>
</head>
<body>
<select id="ddList" onClick="onSelect()">
<option value="0">Select Me</option>
<option value="1">List1</option>
<option value="2">List2</option>
<option value="3">List3</option>
</select>
</body>
</html>
The closest functionality that you're seeking that I can think of is the following:
-HTML-
<select class="opt-evt">
<option value="" selected="selected"></option>
<option value="1976">1976</option>
</select>
-jQuery-
$(document).ready(function(){
$('.opt-evt').change(function(){
$(this).blur();
}).blur(function(){
console.log($(this).find('option:selected').val());
});
});
The caveat is that if the user selects '1976' again, the desired event only gets fired onBlur.
http://jsfiddle.net/4G9Jf/
I have fixed as below,
<html>
<head>
<script>
function onSelect()
{
var dd = document.getElementById('ddList');
var txtTerms = document.getElementById('selValue');
var storeLstSlct = document.getElementById('checkIndx');
var slctdValue = '';
if(dd.selectedIndex == 0)
{
return false;
}else if(storeLstSlct.value == dd.options[dd.selectedIndex].value)
{
storeLstSlct.value = 'abcd';
return false;
}else
{
slctdValue = dd.options[dd.selectedIndex].value;
if(txtTerms.value != '')
txtTerms.value = txtTerms.value + ' , ' + slctdValue;
else
txtTerms.value = slctdValue;
storeLstSlct.value = slctdValue;
}
}
</script>
</head>
<body>
<select id='ddList' onclick='onSelect()'>
<option value='0'>Select Me</option>
<option value='One'>List1</option>
<option value='Two'>List2</option>
<option value='Three'>List3</option>
</select>
<input type='hidden' name='checkIndx' id='checkIndx' />
<input type='text' name='selValue' id='selValue' />
</body>
</html>
This basic idea should work using jQuery using click event:
$('#yourselect').click(function() {
console.log("your function");
});
A simple if statement could prevent firing off the function when initially clicking the select element.