如何獲得多個下拉框的選定值onclick？

我有3個下拉列表，範圍從0到9.
一旦我選擇下拉列表中的值並單擊提交按鈕，我需要獲取所有3下拉列表中選定的值。我怎樣才能做到這一點？如何獲得多個下拉框的選定值onclick？

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

來源

2017-01-09 Mithun Raikar

你不能有id作爲同一 –

@Akshaypadwal我剛剛更新OP –

耶您的解決方案是好的，它工作的 –

您可以使用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); 
 
    }) 
 
});

<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='btn'>Send</button>

來源

2017-01-09 11:23:23 Ionut

試試這個：

<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){ 
 
     \t x[i] = el.value; 
 
     }) 
 

 
\t \t console.log(x); 
 
    }); 
 
    </script>

來源

2017-01-09 11:19:19

如何獲得多個下拉框的選定值onclick？

回答

相關問題