Javascript显示多个选择选项值_Javascript_Html_Multiple Select

Javascript显示多个选择选项值

javascript html

Javascript显示多个选择选项值,javascript,html,multiple-select,Javascript,Html,Multiple Select,我正在尝试仅使用JavaScriptt从多个Select获取（或显示）值。比方说，用户可以从这里选择多个选项，当他们单击“显示选择”按钮时，他们可以看到这些选项的值。关于“选定”属性，我是从但是，代码不起作用。有什么帮助吗 <select id ="selectOptions" name="cars" multiple> <option value="volvo">Volvo</option> <option value="saab">

我正在尝试仅使用JavaScriptt从多个Select获取（或显示）值。比方说，用户可以从这里选择多个选项，当他们单击“显示选择”按钮时，他们可以看到这些选项的值。关于“选定”属性，我是从但是，代码不起作用。有什么帮助吗

<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);}

    }
}


沃尔沃汽车
萨博
欧宝
奥迪
选秀
函数myFunction（）
{
var numOfOptions=document.getElementById（“slecoptions”）.options.length；
var n=0；
对于（n=0；n只需使用
var select = document.getElementById("selectOptions");

console.log(select.selectedOptions);

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


函数myFunction（）{
var options=document.getElementById（“selectOptions”）.options；
对于（var n=0；n


沃尔沃汽车
萨博
欧宝
奥迪
显示选择

函数eraseText（）{document.getElementById（“txtChoices”）.value=“”；
}
函数SetMulti（）{var txtChoices=document.getElementById（“txtChoices”）；txtChoices.value+=document.getElementById（“choiceNames”）.value；
}


“变量”选项下拉列表：


长的
简而言之，
红色
卷曲的
直的
添加
重置
select的ID是selectOptions
，但您可以通过slecoptions
<!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>