如何从输入选择类型获取值并在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"; 
}