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

你可以：
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";
}

Answer 2

首先，您只需获取对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";

注意：您最初要隐藏您的选择。如果是这种情况，那么任何人都无法从中选择一个值。

现在，您还必须决定“何时”您希望完成所有这些操作。这可能是当select中的值发生变化时。 BUt，如果是这种情况，你应该添加option之类的--- Select One ---，因为如果用户想要第一次选择，他们就不会做任何事情，这不会触发change 1}}事件。所以，把它们放在一起，我们得到：

// 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>

如何从输入选择类型获取值并在javascript中使用它？

2 个答案: