如何获取多个下拉框的选定值onclick?

时间:2017-01-09 11:13:25

标签: javascript html

我有3个下拉列表,范围从0到9 一旦我在下拉列表中选择值并单击提交按钮,我需要在所有3个下拉列表中选择值。我怎么能这样做?

<select id="cost1" class="cost-block">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <!-- And so on up to 9 -->
</select>

<select id="cost2" class="cost-block">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <!-- And so on up to 9 -->
</select>

<select id="cost3" class="cost-block">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <!-- And so on up to 9 -->
</select>

javascript

function calculateBalance() {
    var pluss = document.getElementById("cost1").value;
    alert(pluss);
}

2 个答案:

答案 0 :(得分:1)

试试这个:

&#13;
&#13;
<select id="cost1" class="cost-block">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>

    <select id="cost2" class="cost-block">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>

    <select id="cost3" class="cost-block">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>
    
    <button id="click">CLICK</button>
    
    <script>

document.getElementById("click").addEventListener("click", function(){
         var x=[];
         var select = document.querySelectorAll('select');

         select.forEach(function(el,i){
        	 x[i] = el.value; 
        })

		 console.log(x);
   });
    </script>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您可以使用class dog { } class cat { } class process { static void Call(dog d) { Console.WriteLine("dog is called"); } static void Call(cat c) { Console.WriteLine("cat is called"); } } class polymorphism { public static void Main() { dog dog = new dog(); cat cat = new cat(); Call(dog); } } 获取所有选择元素,添加document.querySelectorAll('.cost-block');事件监听器和click以获取每个选择的所有选定值。试试这个:

forEach
document.getElementById("btn").addEventListener("click", function(){
     var elems = document.querySelectorAll('.cost-block');
     elems.forEach(function(el){
          console.log(el.options[el.selectedIndex].text);
     })
 });