入力選択型の値をJavaScriptで使用するにはどうすればよいですか？

Question

だから私は、私は衣料品店をしなければならないと私は次のことをやりたい、このプロジェクトがあります。

<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で：私はHTMLでこのコードを持っている

を値は、それが価値だと確認するチェックしvar price;を作成して、価格設定：

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

を、後でこのようにそれを表示します。

を

何か助けていただければ幸いです。
この

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

このような関数2-作成などの選択にリスナーを1-追加：あなたができる

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を追加する必要があります。ユーザーが最初の選択を望む場合は、何もしないので、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

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