javascript - 如何根据我的数组填充 3 个下拉框和 1 个输入框？ HTML Javascript

Question

我需要帮助来计算我的 fiddle 中的代码。我有 3 个下拉框和 1 个输入框。我想做的是，

Box 1: Show the brand

Box 2: Show the model based on brand

Box 3: Parts available for repair (screen, battery, etc... it varies depends on the brand)

Box 4: Inputbox that shows the price.

每个手机部件都有自己的价格，因此只有在选择了品牌、型号和部件后，才应将价格填充到输入框中。

所以基本上，当您选择 Apple -> iPhone 5 -> Screen 时，输入框应该显示屏幕的价格，等等...

我只是想不出如何解决这个问题。

我必须显示代码才能附加 fiddle 。

<select name="devicelist" id="devicelist" style="width:350px;" onchange="changecat1(this.value);">
      <option value="" disabled selected>Select Brand</option>
      <option value="A">Apple</option>
      <option value="B">Blackberry</option>
      <option value="G">Google</option>
      <option value="H">Huawei</option>
      <option value="L">LG</option>
      <option value="M">Motorola</option>
      <option value="S">Samsung</option>
    </select>

这是我的 JSFiddle .

Answer 1

我希望这能回答你的问题

$(document).ready(function () {
    $("#type").change(function () {
        var val = $(this).val();
        if (val == "A") {
            $("#size").html("<option value='test1'>iPhone</option><option value='test2'>iPhone2</option>");
        } else if (val == "B") {
            $("#size").html("<option value='test2'>Blackberry1</option><option value='test2'>Blackberry2</option>");
        } else if (val == "C") {
            $("#size").html("<option value='test3'>item3: test 1</option><option value='test2'>item3: test 2</option>");
        } else if (val == "") {
            $("#size").html("<option value=''>--select one--</option>");
        }
    });
    
     $("#size").change(function () {
        var val = $(this).val();
        if (val == "test1") {
            $("#khind").html("<option value='test1'>Screen</option><option value='test2'>Battery</option>");
        } else if (val == "test2") {
            $("#khind").html("<option value='test2'>Front Camera</option><option value='test2'>back Front Camera</option>");
        } else if (val == "test3") {
            $("#khind").html("<option value='test3'>glass</option><option value='test2'>housing</option>");
        } else if (val == "item0") {
            $("#khind").html("<option value=''>--select one--</option>");
        }
    });
    
    $("#khind").change(function () {
        var val = $(this).val();
        if (val == "test1") {
            $("#price").html("<option value='test1'>$189.00</option><option value='test2'>$19.00</option>");
        } else if (val == "test2") {
            $("#price").html("<option value='test2'>$189.00</option><option value='test2'>$189.00</option>");
        } else if (val == "test3") {
            $("#price").html("<option value='test3'>$189.00</option><option value='test2'>item3: test 2</option>");
        } else if (val == "") {
            $("#price").html("<option value=''>--select one--</option>");
        }
    });
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="type">
  <option value="" disabled selected>Select Brand</option>
  <option value="A">Apple</option>
  <option value="B">Blackberry</option>
  <option value="G">Google</option>
  <option value="H">Huawei</option>
  <option value="L">LG</option>
  <option value="M">Motorola</option>
  <option value="S">Samsung</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>

<select id="khind">
    <option value="">-- select one -- </option>
</select>

<select id="price">
    <option value="">-- select one -- </option>
</select>