Javascript Show複数選択オプション値

-2

Javascritptのみを使用して複数選択から値を取得（または表示）しようとしています。ユーザーはここから複数のオプションを選択でき、「表示選択」ボタンをクリックすると、これらのオプションの値がわかります。私は 'selected'属性について考えましたhere しかし、コードは機能しませんでした。どんな助け？Javascript Show複数選択オプション値

<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

反復を使用して、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>

または選択したオプションのコレクションを取得するために読み取り専用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 Show複数選択オプション値

答えて

関連する問題