61

我有以下标记：

<select onchange="jsFunction()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

当用户拉下组合框并选择先前选择的相同选项（或根本不更改选择）时，JavaScript 不会将其视为onchange事件。所以，jsFunction()没有调用。jsFunction()但即使在这种情况下，我也想要被调用。我怎样才能做到这一点？

4

8 回答 8

79

我会这样做：

<select onchange="jsFunction()">
  <option value="" disabled selected style="display:none;">Label</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

如果您愿意，您可以使用与第一个选项相同的标签，在本例中为 1。更好的是：在其中为框中的选项放置一个标签。

于 2012-08-09T06:04:09.443 回答
24

你必须添加空选项来解决它，

我也可以给你一个更多的解决方案，但这取决于你是否适合你，因为用户在选择 jsFunction 以外的其他选项后选择默认选项将被调用两次。

<select onChange="jsFunction()" id="selectOpt">
    <option value="1" onclick="jsFunction()">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

function jsFunction(){
  var myselect = document.getElementById("selectOpt");
  alert(myselect.options[myselect.selectedIndex].value);
}
于 2012-08-09T06:36:56.883 回答
4

只需将selectIndex关联<select>标签的 设置-1为处理事件的最后一步。 

mySelect = document.getElementById("idlist");
mySelect.selectedIndex = -1;

它每次都有效，删除突出显示并允许您再次选择相同（或不同）的元素。

于 2016-03-30T04:54:31.053 回答
2

试试这个。只需添加一个空选项。这将解决您的问题。

<select onchange="jsFunction()">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>​
于 2012-08-09T06:03:01.610 回答
1

对每个选项元素使用“onmouseup”属性。它很冗长，但应该可以。另外，根据你的函数实际在做什么，你可以安排一些不同的事情，假设这个数字在处理程序中很重要：

<select>
<option onmouseup="handler()" value="1">1</option>  //get selected element in handler
<option onmouseup="handler(2)" value="2">2</option>  //explicitly send the value as argument
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary
</select>
于 2013-08-28T06:10:04.390 回答
1

JavaScript 代码：

  • 在 mousedown 事件上：将 selectedIndex 属性值设置为 -1
  • 更改事件：处理事件

唯一的缺点是当用户点击下拉列表时，当前选中的项并没有出现选中

于 2015-03-04T07:52:55.843 回答
1

对于这个问题，我终于放了一个新<i>标签来代替刷新选择。如果选择的选项与已选择的选项相同，请不要尝试触发事件。

在此处输入图像描述

如果用户单击“刷新”按钮，我会触发我的选择的 onchange 事件：

const refreshEquipeEl = document.getElementById("refreshEquipe1");

function onClickRefreshEquipe(event){
    let event2 = new Event('change');
    equipesSelectEl.dispatchEvent(event2);
}
refreshEquipeEl.onclick = onClickRefreshEquipe;

这样，我不需要尝试在我的选择中选择相同的选项。

于 2020-04-23T21:42:13.870 回答
0

它没有被触发，因为值没有“改变”。这是相同的值。不幸的是，您无法使用该change事件实现所需的行为。

blur当用户离开选择框时，您可以处理该事件并执行您需要的任何处理。这样，即使用户选择了相同的值，您也可以运行所需的代码。

于 2012-08-09T06:09:01.763 回答