Question

我试图仅使用Javascritpt从Multiple Select中获取（或显示）值。我们可以说，用户可以从此处选择多个选项，当他们点击“显示选择”按钮时，按钮，他们可以看到这些选项的值是什么。我接受了关于选择＆＃39;的想法。来自 here 的属性但是，代码没有用。有什么帮助吗？

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

    }
}

Answer 1

只需使用

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

console.log(select.selectedOptions);

Answer 2

迭代选项并检查checked属性。虽然选择器中有一个简单类型，但字符串中缺少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>

或者使用readonly 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>

Answer 3

<!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>

Javascript显示多个选择选项值

3 个答案: