Question

我有这个HTML代码，显示选项更改alert();

如何阻止它在其中一个选项上显示警告但是保留在其他选项上？

<select onchange="alert();">
    <option>d</option>
    <option>de</option>
    <option>dewe</option>
    <option>dewee</option>
</select>

Answer 1

你可以简单地创建一个处理程序，并可以像这样放置

function alertMessage()
{
    if(document.getElementById('select').value !="d"){
        alert('yes');
    }
}

你的标记将是

<select id="select" onchange="alertMessage();">

Js Fiddle Demo

Answer 2

当您不希望选项 d 提出警报时，这是一个示例：

 <select onchange="if(this.value!='d'){alert('yes');}">
                <option>d</option>
                <option>de</option>
                <option>dewe</option>
                <option>dewee</option>
            </select>

在此fiddle onchange事件中，事件被修改为在触发事件时调用自定义函数。

Answer 3

例如，您不需要警告第二个选项de：

<select onchange="selectChangeHandler(this)">
    <option>d</option>
    <option>de</option>
    <option>dewe</option>
    <option>dewee</option>
</select>
<script>
    function selectChangeHandler(selectNode) {
         if (selectNode.selectedIndex !== 1) {
             alert("I'm alert option!");
         }
    }
</script>

Answer 4

试试这个......

<script type="text/javascript">
$(document).ready(function()
{
$("select").change(function()
{
if($(this).val() != "dee")
alert($(this).val());
});
});
</script> 
</head>


<select>
<option>d</option>
<option>de</option>
<option>dee</option>
<option>deep</option>
</select>

Answer 5

要添加更通用的解决方案，您可以将数据属性添加到您感兴趣的选项中，更新onchange以调用自定义函数，并将事件数据传递给它，类似于：

<select onchange="doSelectAlert(event);">
    <option data-no-alert>d</option>
    <option>de</option>
    <option>dewe</option>
    <option>dewee</option>
</select>

然后，您可以询问事件数据，仅警告具有特定属性的选项，类似于：

function doSelectAlert(event) {
    var option = event.srcElement.children[event.srcElement.selectedIndex];
    if(option.dataset.alert !== undefined){
        alert('Hello Selection');
    }
}

当然，如果您有更多选项可以被警告，您可以反转逻辑并添加数据属性，如data-no-alert并更改代码以警告除具有该属性的选项之外的所有选项，类似于此：

<select onchange="doSelectAlert(event);">
    <option data-no-alert>d</option>
    <option>de</option>
    <option>dewe</option>
    <option>dewee</option>
</select>

function doSelectAlert(event) {
    var option = event.srcElement.children[event.srcElement.selectedIndex];
    if (option.dataset.noAlert !== undefined) {
        return;
    }

    alert('Hello Selection');
}

DEMO - 标记警报的特定选项

DEMO - 将特定选项标记为不提醒

IE 10和更低支持的注意事项：

如果您需要支持IE 10或更低版本，请更改dataset查询以使用普通旧属性语法代替，类似于：

function doSelectAlert(event) {
    var option = event.srcElement.children[event.srcElement.selectedIndex];

    // element.dataset is not supported in IE 10 or below
    // use standard attribute syntax instead...
    if (option.getAttribute('data-no-alert') !== null) {
        return;
    }

    alert('Hello Selection');
}

如果您希望能够使用数据集，请使用modernizr填充数据集。

选择选项更改时发出警报

5 个答案: