Question

我有以下Html代码。这是一个国家名单。我想在选择单个或多个国家时显示，它会显示选择了哪些国家/地区的警报。我在JavaScript中使用以下代码。我不想使用Jquery或PHP或其他任何东西..

 <select name= "countrylaw">
         <option value = "1">Afghanistan</option>
         <option value = "2">Albania</option>
         <option value = "3">Algeria</option>
         <option value = "4">Andorra</option>
         <option value = "5">Angola</option>
         <option value = "6">Antigua & Deps</option>
         <option value = "7">Argentina</option>
         <option value = "8">Armenia</option>

这是我在Java脚本中的代码，但它无法正常工作

        var select1 = document.getElementsByName("country");
        var selected1 = [];
        for (var i = 0; i < select1.length; i++)
        {
         if (select1.options[i].selected) 
            {
                 alert("File Selected for " + select1.options[i].value +" ")

            }
        }

Answer 1

您应该使用onchange事件，如下所示：

var select = document.getElementsByTagName("select")[0];

select.onchange = function(){
    if(select.selectedIndex == -1) return null;   // if no option is selected

    // select.options is the list of selected options
    // select.selectedIndex is the index of currently selected option
    alert(select.options[select.selectedIndex].text); 
}

的 DEMO

您只需使用for循环执行一次性测试。如果用户更改了他的选择，它将不会再次执行，因此，您必须使用事件。

Answer 2

要使您的选择框可以多选，请为其添加multiple属性要在用户更改选择时让您的javascript运行，请为其添加onchange属性：

<select name="countrylaw" multiple onChange="showSelectedCountry(this)">
         <option value = "1">Afghanistan</option>
         <option value = "2">Albania</option>
         <option value = "3">Algeria</option>
         <option value = "4">Andorra</option>
         <option value = "5">Angola</option>
         <option value = "6">Antigua & Deps</option>
         <option value = "7">Argentina</option>
         <option value = "8">Armenia</option>
</select>

然后定义函数回调：

showSelectedCountry = function(select){
    for(var i = 0; i < select.selectedOptions.length; i++){
        alert(select.selectedOptions[i].innerHTML);
    };
}

您可以查看demo on jsFiddle。

使用javascript显示多选的警报

2 个答案:

的 DEMO