当下拉列表项更改时动态显示所选项目作为警报(Javascript)

Question

每次选定的下拉列表项更改时，我都试图更改分区中显示的值。到目前为止，我一直在单击按钮执行此操作，但是，我想知道每次选择更改时是否可以自动更改此值。

<select id="mySelect">
    <option value="st1" selected="selected">Create new Stream</option>
    <option value="st1">Stream 1</option>
    <option value="st2">Stream 2</option>
    <option value="st3">Stream 3</option>
    <option value="st4">Stream 4</option>
</select>

<input type="button" value="show attributes" class="panel-button-attr" onclick="choice()">

我的js函数：

function choice() {

    var choice=document.getElementById("mySelect");
    var strUser = choice.options[choice.selectedIndex].text;

    if(strUser=="Stream 1"){
        alert("You selected Stream 1");
    }
    else if(strUser=="Stream 2"){
        alert("You selected Stream 2");
    }
    else if(strUser=="Stream 3"){
        alert("You selected Stream 3");
    }
    else if(strUser=="Stream 4"){
        alert("You selected Stream 4");
    }
    else {
        alert("Create Stream");
    }

}

根据这段代码，我需要显示警报消息而不是每次都调用 choice(0 函数。相反，下拉列表中的每个选择更改都应该提醒它

Answer 1

首先，你可以这样做（更动态）：

var choice  = document.getElementById("mySelect");

function choice()
{
    var strUser = choice.options[choice.selectedIndex].text;

    if(strUser !== "Create new Stream"){
        alert("Create new stream");
    }
    else{
        alert("You selected " + strUser);
    }
}

然后，您必须向 select 添加一个 "onChange" 事件。

<select id="mySelect" onchange="choice()">
    <option value="st1" selected="selected">Create new Stream</option>
    <option value="st1">Stream 1</option>
    <option value="st2">Stream 2</option>
    <option value="st3">Stream 3</option>
    <option value="st4">Stream 4</option>
</select>

它一点也不干净，但它会起作用。如果你想要更好更正确的方法，请告诉我。

Answer 2

您可以在 select 上设置 onchange 事件：

<select id="mySelect" onchange="choice()">
    <option value="st1" selected="selected">Create new Stream</option>
    <option value="st1">Stream 1</option>
    <option value="st2">Stream 2</option>
    <option value="st3">Stream 3</option>
    <option value="st4">Stream 4</option>
</select>

当下拉列表项更改时动态显示所选项目作为警报(Javascript)

Dynamically display selected item as an alert when drop down list item changes(Javascript)

html

javascript

select

dynamically-generated

drop-down-menu