Javascript显示多个选择选项值

-2

我试图从仅使用Javascritpt的Multiple Select中获取（或显示）值。比方说，用户可以从这里选择多个选项，当他们点击“显示选择”按钮时，他们可以看到这些选项的值。我从here 的想法'选择'属性但是，代码没有工作。任何帮助？Javascript显示多个选择选项值

<select id ="selectOptions" name="cars" multiple> 

    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 

</select> 

<button onclick="myFunction()">Show Selects</button> 

<script> 

function myFunction() 
{ 

    var numOfOptions = document.getElementById("slectOptions").options.length; 
    var n=0; 



for (n=0; n<numOfOptions; n++) 
    { 



    // I tried to use a for loop that will go around from option 0 to 3, 
    //and through 'selected' attribute wanted to check the condition if the option is selected then only show the values 
    // I still couldn't figure out if the loop is working at all 

     if (document.getElementById("slectOptions")[n].selected) 
    { 
      var x = document.getElementById("slectOptions").value; 
      window.alert(x);} 

    } 
}

来源

2016-12-27 ffoss

的选择的ID是'selectOptions'但你通过'slectOptions'多次提到它 – j08691

只需使用

var select = document.getElementById("selectOptions"); 

console.log(select.selectedOptions);

来源

2016-12-27 17:14:33

遍历选项，并检查中检查属性。虽然在选择器中有一个简单的类型，但在字符串中缺少e。

function myFunction() { 
 
    var options = document.getElementById("selectOptions").options; 
 
    for (var n = 0; n < options.length; n++) { 
 
    if (options[n].selected) { 
 
     console.log(options[n].value); 
 
    } 
 

 
    } 
 
}

<select id="selectOptions" name="cars" multiple> 
 

 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="opel">Opel</option> 
 
    <option value="audi">Audi</option> 
 

 
</select> 
 

 
<button onclick="myFunction()">Show Selects</button>

或者使用只读selectedOptions属性来获取所选选项的集合。

function myFunction() { 
 
    var options = document.getElementById("selectOptions").selectedOptions; 
 
    for (var n = 0; n < options.length; n++) { 
 
    console.log(options[n].value); 
 
    } 
 
}

<select id="selectOptions" name="cars" multiple> 
 

 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="opel">Opel</option> 
 
    <option value="audi">Audi</option> 
 

 
</select> 
 

 
<button onclick="myFunction()">Show Selects</button>

来源

2016-12-27 17:16:36

<!DOCTYPE html> 
<html> 
<script> 
    function eraseText() {document.getElementById("txtChoices").value = ""; 
} 

    function SetMulti() {var txtChoices = document.getElementById("txtChoices"); txtChoices.value += document.getElementById("choiceNames").value; 
} 
</script> 
</head> 
<body> 
    <input type="text" id="txtChoices" readonly="readonly" placeholder="Multiple choice"/></br> 

    "Variable" Choice dropdown: 
    </br> 
    <select multiple="" name="choiceNames" id="choiceNames"> 
    <option value="Long, ">Long, </option> 
    <option value="Short, ">Short, </option> 
    <option value="Red, ">Red, </option> 
    <option value="Curly, ">Curly, </option> 
    <option value="Straight, ">Straight, </option> 
    </select> 

    <button onclick="SetMulti()">Add</button> 
    <button onclick="eraseText()">Reset</button> 

</body> 
</html>

来源

2017-05-23 11:21:42

Javascript显示多个选择选项值

回答

相关问题