Question

我需要实现以下目标：

我在手机维修店网站的表格中有2个下拉菜单。一个下拉菜单叫做＃34;手机型号＆＃34;和另一个＆＃34;失败类型＆＃34;。

在我结合这两个选择后，我需要拿出一个价格。它不一定必须基于选择的实际值：它基本上是这样的：

if 
Phone model = "iPhone 6",
failure type = "cracked screen"
print the value 200 somewhere.

OR 

Phone model = "iPhone 4"
failure type = "cracked screen"
print the value 50 somewhere.

我需要做的例子：

我怎么能这样做？

Answer 1

尝试这样的事情：

获取第一个和第二个下拉值，然后检查这两个值，如：

if(val != '' && val2 != ''){
    if(val1 = 'text1' && val2 == 'text2'){
        document.getElementById('amount') = '50';   // will put the amount to textbox
    }
}

Answer 2

你可以这样做，

示例在jquery中，但您可以通过原始javascript执行相同操作。

HTML，

<label>Model</label>
<select id="select-model" data-toggle="price-update">
  <option value="iphone4">Apple iPhone 4</option>
  <option value="iphone5">Apple iPhone 5</option>
</select>

<label>Failure Type</label>
<select id="select-issue" data-toggle="price-update">
  <option value="cracked-screen">Cracked Screen</option>
  <option value="bricked-os">Bricked OS</option>
</select>

<label>Price</label>
<input id="price" vlaue="" />

JS，

$('[data-toggle=price-update]').each(function(){
  $(this).change(function(){
    var model = $('select#select-model option:selected').val(),
        issue = $('select#select-issue option:selected').val(),
        input = $('#price');

    switch(model) {
      case 'iphone4':
          if(issue == 'cracked-screen'){
            input.val('$ 10.00');
          }
          if(issue == 'bricked-os'){
            input.val('$ 20.00');
          }
          break;
      case 'iphone5':
          if(issue == 'cracked-screen'){
            input.val('$ 30.00');
          }
          if(issue == 'bricked-os'){
            input.val('$ 40.00');
          }
          break;
    }
  });
});

请参阅示例：https://jsfiddle.net/ey7tt3yp/

如果你这样做会更清洁，所以你可以有很多这样的组合。

JS，

var data = {
    "iphone4": {
        "cracked-screen": "10.00",
        "bricked-os": "20.00"
    },
    "iphone5": {
        "cracked-screen": "30.00",
        "bricked-os": "40.00"
    }
}

$('[data-toggle=price-update]').each(function(){
  $(this).change(function(){
    var model = $('select#select-model option:selected').val(),
        issue = $('select#select-issue option:selected').val(),
        input = $('#price');

    input.val('$ ' + data[model][issue]);
  });
});

请参阅示例：https://jsfiddle.net/ey7tt3yp/3/

希望这有帮助！：）

根据2种不同下拉菜单选项

2 个答案: