实际选择的选项上的功能

Question

我有表单，选择菜单只有两个选项。我不想在这个表单中使用提交按钮。

选择选项之一时，'onchange事件'运行功能。但是用户可以再次单击已选择的选项...再次..再次...每次用户单击已选择或实际选择的选项时，我都需要运行此功能。是否有一些解决方案可以在实际选择的选项上运行功能？

jsFiddle EXAMPLE

HTML

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

Javascript

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

Answer 1

这是一个坏技巧，如果你不介意 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 2

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

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);  
   }

});

<select id="mySelect">
  <option value="value2">option 1</option>
  <option value="value1">option 2</option>
</select>

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