Question

我在onclick框

的选项标记中使用了select个事件

<select>
    <option onclick="check()">one</option>
    <option onclick="check()">two</option>
    <option onclick="check()">three</option>
</select>`

onclick事件无法在IE和Chrome上运行，但它在Firefox中工作正常，在这里我不想在select标签bcz上使用onchange事件，如果用户再次选择相同的选项，它将不会触发事件

例如：说第一次用户选择“一个”下拉列表我会在处理完一些东西后打开弹出窗口用户关闭弹出窗口，假设用户想要选择相同的“一个”下拉列表它不会触发任何事件。这可以解决在选项标签上使用onclick事件，但它不适用于IE和chrome

有没有解决这个问题？

Answer 1

在大多数版本的IE，Safari和Chrome上，onclick标记上的

option事件将失败：reference

如果您想在用户选择时触发事件，为什么不简单地使用：

<select onclick="check()">
<option>one</option>
<option>two</option>
<option>three</option>

如果您想对选择的特定选项执行某些操作：

<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)">
<option>one</option>
<option>two</option>
<option>three</option>

这样，当且仅当选择了某个选项时，才能保证拨打check()。

编辑：正如@ user422543在评论中指出的那样，此解决方案在Firefox中不起作用。因此我在这里问了另一个问题：Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?

到目前为止，使用<select>标记似乎无法在所有浏览器中保持一致。但是，如果我们使用jQuery UI select menu或Chosen等库来模拟选择菜单来创建选择菜单而不是使用<select>标记，click事件将在{{<ul>上被触发1}}或<li>标记在我测试的所有浏览器中都是一致的。

Answer 2

我有另一个建议，它不是100％，而是差不多：

<select onchange="valueChanged(this.value); this.selectedindex = -1">
    <option style="display: none"></option>
    <option value="1"> 1 </option>
    <option value="2"> 2 </option>
    <option value="3"> 3 </option>
    <option value="4"> 4 </option>
</select>

这样即使用户选择了两次相同的选项，也会触发事件。问题是IE将显示空选项（它会忽略样式属性），但是单击它不会触发事件，因为它总是从选择开始，因此选择它不会触发更改......

Answer 3

这会通过记录点击次数来模拟onclick上的option个事件。

http://jsfiddle.net/yT6Y5/1/

忽略第一次点击（用于扩展下拉列表），
第二次点击实际上是您的“选择”。（然后重置点击次数）。

虽然不支持键盘交互....

哦，我正在使用JQuery，但你可以使用纯JS重新做它

Answer 4

你必须

将脚本放在select，
设置onclick和onblur for select，如代码
并自定义检查功能。

我已经测试了它并且有效：）。

<script>
    selectHandler = {
        clickCount : 0,
        action : function(select)
        {
            selectHandler.clickCount++;
            if(selectHandler.clickCount%2 == 0)
            {
                selectedValue = select.options[select.selectedIndex].value;
                selectHandler.check(selectedValue);
            }
        },
        blur : function() // needed for proper behaviour
        {
            if(selectHandler.clickCount%2 != 0)
            {
                selectHandler.clickCount--;
            }
        },
        check : function(value)
        {
            // you can customize this
            alert('Changed! -> ' + value);
        }
    }

</script>
<select onclick="selectHandler.action(this)" onblur="selectHandler.blur()">
    <option value="value-1"> 1 </option>
    <option value="value-2"> 2 </option>
    <option value="value-3"> 3 </option>
    <option value="value-4"> 4 </option>
</select>

Answer 5

我发现以下内容对我有用 - 而不是在点击时使用，用于改变，例如：

jQuery('#element select').on('change',  (function() {

   //your code here

}));

Answer 6

在选择标记的ID中使用function(this)

例如

<script type="application/javascript">

var timesSelectClicked = 0;

$(function() {
    $(document).on('click keypress', 'select', function (e) {
        if (timesSelectClicked == 0)
        {
            timesSelectClicked += 1;
        }
        else if (timesSelectClicked == 1)
        {
            timesSelectClicked = 0;
            prompt($('select option:selected').text());
        }
    });
});
</script>

Answer 7

此代码在Google Chrome浏览器中不起作用，但在Mozilla中起作用。

<select>
    <option value="2" (click)="myFunction($event)">
     <div>2</div>
    </option>

    <option value="5" (click)="myFunction($event)">
     <div>5</div>
    </option>

   <option value="10" (click)="myFunction($event)">
    <div>10</div>
  </option>

</select>

此解决方案适用于Chrome和Mozilla。我没有在Safari中测试。

<select (change)="myFunction($event)">
    <option value="2">
     <div>2</div>
    </option>

    <option value="5">
     <div>5</div>
    </option>

   <option value="10">
    <div>10</div>
  </option>

</select>

Answer 8

此功能可在不同的浏览器上使用CHROME，FIREFOX，IE，AVAST BROWSER，BRAVE，Etc ...，并且事件一遍又一遍地发生，用户可以尽可能多地更改选项。

unsigned char buffer[512];
//...
while(fread(buffer, 1, 512, file) == 512)
{
    //...

Answer 9

如果您只想在用户点击选项时触发 onclick 事件，请使用 event.detail:

<select onclick="selectFunc(this.children[this.selectedIndex])">

在你的函数定义中：

function selectFunc(option){
  //event.detail = 0 on option click across firefox, chrome, opera, edge
  if(!event.detail){
    //your code
  }
}

onclick选项标签不适用于IE和Chrome

9 个答案: