HTML SELECT - 即使未更改选项，也会触发JavaScript ONCHANGE事件

Question

我有以下标记：

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

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

Answer 1

我会这样做：

<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。 更好的是：在框中放置一个标签以供选择。

Answer 2

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

我也可以给你一个更多的解决方案，但是由你决定是否适合你因为在选择除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);
}

Answer 3

对每个选项元素使用“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>

Answer 4

JavaScript代码：

• on mousedown事件：将selectedIndex属性值设置为-1
• on change event：handle event

唯一的缺点是，当用户点击下拉列表时，当前所选项目似乎未选中

Answer 5

只需将关联的selectIndex代码的<select>设置为-1即可作为处理事件的最后一步。

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

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

Answer 6

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

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

Answer 7

它没有触发，因为值没有“改变”。这是相同的价值。遗憾的是，使用change事件无法实现所需的行为。

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

Answer 8

对于这个问题，我终于放置了一个新的<View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', alignItems: "center", justifyContent: "center" }}> <Spinner animation="border" variant="success" /> </View> 标签来刷新选择内容。如果所选选项与已选择的选项相同，请勿尝试触发事件。

如果用户单击“刷新”按钮，我将通过以下方式触发我选择的onchange事件：

<i>

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