如何在multiselect中禁用移动浏览器中的select onchange事件选项

Question

我需要一个多选标签，并在onchange事件触发时禁用某些选项，因为可能的选择量有限。

基本代码如下：

<script type="text/javascript">
    function selectionChange(selection) {
        selection.options[0].disabled = true;
    }
</script>
<select multiple="multiple" onchange="selectionChange(this)">
    <option>Option #1</option>
    <option>Option #2</option>
    <option>Option #3</option>
    <option>Option #4</option>
    <option>Option #5</option>
</select>

正如您所看到的，在桌面浏览器中没有什么特别之处就像魅力一样。问题出在移动浏览器中。

在Android中，例如，在按OK之前，onchange不会触发。

现在奇怪的是，在iOS Safari中，当我使用alret()时，警报将会触发，但选择项将保持启用状态，直到我按下＆＃34;完成＆＃34;然后再次打开选择。但是在Android中，只有按OK才会触发警报。

我花了几天时间在这里寻找解决方案，我开始认为这不能在移动浏览器中完成，但我也没有找到任何参考。

Answer 1

也许你可以尝试类似的东西：

<script type="text/javascript">
    function selectionClicked(selection) {
        // Check if any option was selected
        if(selection.value) {
            selection.options[0].disabled = true;
        }
    }
</script>
<select multiple="multiple" onclick="selectionClicked(this)">
    <option>Option #1</option>
    <option>Option #2</option>
    <option>Option #3</option>
    <option>Option #4</option>
    <option>Option #5</option>
</select>

或

<script type="text/javascript">
    function selectionClicked(selection) {
        // Check if any option was selected
        for(var i=0; i<selection.options.length; i++) {
            if(selection.options[i].selected) {
                selection.options[0].disabled = true;
                break;
            }
        }
    }
</script>