如何從輸入選擇類型獲取值並在JavaScript中使用它？

Question

所以我有這個項目，我不得不做出一個服裝店，我要做到以下幾點：

我有這個代碼的html：

<select class="sizeb" style="display: none;"> 
    <option value="xxs">XXS</option> 
    <option value="xs">XS</option> 
    <option value="s">S</option> 
    <option value="m">M</option> 
    <option value="l">L</option> 
    <option value="xl">XL</option> 
    <option value="xxl">XXL</option> 
</select> 

，並用JavaScript我想借此選項值，檢查它的價值，創造一個var price;然後檢查並設定一個價格：

var x = <somehow to get the value>; 
if (x == 'xxs') 
    price = 5; 
else if(x == 'xs') 
    price = 10; 

後來顯示它是這樣的：

document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON"; 

任何幫助表示讚賞。

Answer 1

首先，你只能給一個參考HTML元素並將其分配給一個變量：

var select = document.querySelector(".sizeb"); 

然後，您會看到值：

var val = select.value; 

然後，你做你的邏輯和計算：

var x = <somehow to get the value>; 
if (x == 'xxs'){ 
    price = 5; 
} else if(x == 'xs') { 
    price = 10; 
} 

而且，當時顯示結果：

document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON"; 

注意：你有你的選擇要開始隱藏。如果是這樣的話，沒有人能夠從中選擇一個值。

現在，您還必須決定「何時」您要完成所有這些工作。這可能是選擇中的值發生變化時。但是，如果是那樣的話，你應該加上一個第一option的類似--- Select One ---，因爲如果用戶想第一選擇，他們不會做任何事情，這將不會觸發change事件。所以，把他們放在一起，我們得到：

// Get a reference to the select 
 
var select = document.querySelector(".sizeb"); 
 

 
// Set up an event handler that runs when the value in the select changes: 
 
select.addEventListener("change", function(){ 
 

 
    // Then you get the value: 
 
    var x = select.value; 
 
    
 
    var price = null; 
 
    
 
    // Then you do your logic and calculations. 
 
    // And if will work, but for this a switch is better 
 
    switch (x) { 
 
     case 'xxs' : 
 
     price = 5; 
 
     break; 
 
     case 'xs' : 
 
     price = 10; 
 
     break; 
 
     case 's' : 
 
     price = 15; 
 
     break; 
 
     case 'm' : 
 
     price = 20; 
 
     break; 
 
     case 'l' : 
 
     price = 25; 
 
     break; 
 
     case 'xl' : 
 
     price = 30; 
 
     break; 
 
     case 'xxl' : 
 
     price = 35; 
 
     break; 
 
    } 
 

 

 
    document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON"; 
 
});

<select class="sizeb"> 
 
    <option value="">--- Select One ---</option> 
 
    <option value="xxs">XXS</option> 
 
    <option value="xs">XS</option> 
 
    <option value="s">S</option> 
 
    <option value="m">M</option> 
 
    <option value="l">L</option> 
 
    <option value="xl">XL</option> 
 
    <option value="xxl">XXL</option> 
 
</select> 
 

 
<div id="PriceTag"></div>

Answer 2

您可以：
1添加監聽器來選擇這樣

<select onchange="someFunction(this)" class="sizeb" style="display: none;> 

2，創建這樣一個功能：

function someFunction(element){ 
    va price = element.value; 
    document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON"; 
}