Question

我有表格，只有两个选项的选择菜单。我不想在这种形式下使用提交按钮。

当选择其中一个选项时，'onChange event'运行功能。但是用户可以再次点击已经选择的选项...再次...我每次用户点击已经选择或实际选择的选项时都需要运行此功能。是否有一些解决方案可以在实际选择的选项上运行函数？

HTML

<select onchange="test()">
   <option value="value2">option 1</option>
   <option value="value1">option 2</option>
</select>

的Javascript

function test(){
   alert('OK');
}

Answer 1

您必须在每个选项上听点击事件，而不是在select元素上听onChange。然后在内存中保留最后选择的选项，以便将其与新的选项进行比较。

＆＃13;
＆＃13;
window.addEventListener('load', function() { //Get select element on DOM var domMySelect = document.getElementById('mySelect'); //Declare the last selected option (by default the first option) var lastSelected = domMySelect.children[0]; function test(ev) { //Compare last selected option with current selected option //target is the element on which event is applied if (ev.target == lastSelected) alert('already selected'); //Keep last selected option lastSelected = ev.target; } for (var i = 0; i < domMySelect.children.length; i++) { var child = domMySelect.children[i]; child.addEventListener('click', test); } });
＆＃13;
<select id="mySelect"> <option value="value2">option 1</option> <option value="value1">option 2</option> </select>
＆＃13;
＆＃13;
＆＃13;

Answer 2

这是一个糟糕的技巧，如果你不介意IE如何处理选择标记，那就太好了。

HTML

<select onchange="test(this)" >
   <option id="fake" value="fake">[Default Text]</option>
   <option value="value1">option 1</option>
   <option value="value2">option 2</option>
</select>

和脚本

var fake = $('#fake').hide();
function test(selectTag){
   var selectedOption = $( "select option:selected" );
   var selectedValue = selectTag.value;

   // Do you thing with selected value.
  // For example, log it out
  console.log('selectedValue', selectedValue);

  // Set the text of the fake value 
  fake.text(selectedOption.text());
  // And select it. Note that the fake tag itself is still hidden
  selectTag.value = 'fake';
}

希望你知道我的意思。基本上显示的东西不是您刚刚选择的选项。因此，如果再次选择它，onchange将会触发。当然，当列表显示时，您将没有焦点选项。

<强>更新

我刚刚制作了这个jsbin：https://jsbin.com/manisasojo/edit?html,js,output

如果你没有太多的选项标签，那看起来不错。

Answer 3

嗯，最简单的解决方案就是将onclick事件附加到select元素：

<select onchange="test(this)" onclick="test(this)">
   <option value="value2">option 1</option>
   <option value="value1">option 2</option>
</select>

您还可以区分由evnet.type触发的事件。

请注意，当change事件被触发时，会跟随click事件（查看行为的小提琴），如果您想阻止您可以放置一些将保存该事件的变量最后一个事件的类型或类似的逻辑，例如伪代码：if [change event fired] dont do anything as anyway a click event will follow。一个真实的代码示例：

function test(e){
   if(event.type == 'click')
   {
       console.log(event.type);
       console.log(e.value);
   }
}

Here is a working fiddle example

实际选择的选项功能

3 个答案: