javascript 在下拉列表中选择相同的值时触发事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20354112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger the event when selected the same value in dropdown?
提问by vasmay
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 "1976" AGAIN, I want to run the function again.
问题：我有一个包含年份列表的下拉列表，没有选择任何内容，用户选择“1976”，我运行一个函数。如果用户再次单击下拉菜单并再次选择“1976”，我想再次运行该功能。
$('select').on('change', function (e)
{
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
alert(valueSelected);
});
采纳答案by Prabathi
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>
回答by Christopher Tokar
This basic idea should work using jQuery using click event:
这个基本思想应该使用 jQuery 使用 click 事件：
$('#yourselect').click(function() {
console.log("your function");
});
A simple if statement could prevent firing off the function when initially clicking the select element.
一个简单的 if 语句可以防止在最初单击 select 元素时触发函数。
回答by Nick G
The closest functionality that you're seeking that I can think of is the following:
我能想到的您正在寻找的最接近的功能如下：
-HTML-
-HTML-
<select class="opt-evt">
<option value="" selected="selected"></option>
<option value="1976">1976</option>
</select>
-jQuery-
-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.
需要注意的是，如果用户再次选择“1976”，则所需的事件只会在Blur 上触发。
回答by Kristof Feys
mouseup event should do the trick:
mouseup 事件应该可以解决问题：
$('select').mouseup(function(){
console.log("hue");
});
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.
请注意，当在列表框中选择新值时，这将触发两次。打开选项时一次，选择选项时一次。
回答by vasmay
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>
