使用 javascript 填充下一个选择选项

Question

所以我有 3 个选择选项。品牌模型和零件。当用户单击某个品牌时，下一个选择选项应提供该品牌的模型。例如：

Kawasaki:
     -Curve
     -Boxer 150
     -CT100
     -Fury
Honda:
    -BeAT 110
    -Wave
    -CB110
    -TMX Supremo
Suzuki:
    -Nex 115
    -Thunder 125
    -Hayate 125 
    -Skydrive 125
Yamaha:
    -Mio 125
    -Mio Soul
    -Fino
    -Vega

我

找到了一个可以填充下一个选择选项的脚本，我尝试编辑它以将模型放入其中，但它在这里不起作用的是脚本：

<script type="text/javascript">
$(function(){
    $("#Model").attr("disabled","true");
    $("#Brand").change(function(){
        if(this.value != ""){
          $('#Model').removeAttr('disabled');
           var brand = $("#Brand option:selected").text();
            document.getElementById("Model").options.length = 1;
            for(var i = 0; i < 10 ;i++){
                var selectOption = document.createElement("OPTION");
                selectOption.text = brand + " Model No." + i;
                document.getElementById('Model').appendChild(selectOption);
            } 
$("#Model").selectmenu("refresh","true");            
        }
        else{
            $("#Model").attr("disabled","true"); 
            $("#Model").val("");            
            $("#Model").selectmenu("refresh","true");      
        }
    });
})
</script>

这是我的表格：

<table>
        <form style="position:absolute;left: 15%;top: 25%;" action="orderfilterbrand.php" method="post">
    <div class="stepsClass"><div id="mainselection">
    <h5>Choose Your Motorcycle Brand: </h5>
                <select id="Brand" name="Brand">
            <option value = "">Motorcycle Brand</option>
            <option value = "Kawasaki">Kawasaki</option>
            <option value = "Honda">Honda</option>
            <option value = "Suzuki">Suzuki</option>
            <option value = "Yamaha">Yamaha</option>
            </select>
                </div></div>
                  <div class="stepsClass"><div id="mainselection">
                    <h5>Choose Your Motorcycle Model: </h5>
            <select id="Model" name="Model">
                <option>Motorcycle Model</option>
            </select>
                      </div></div>
                    <div class="stepsClass">
                    <div id="mainselection">
                            <h5>Choose Your Motorcycle Exterior Part: </h5>
            <select id="Part" name="Part">
            <option>Select Motorcycle Part</option>
            <option>Muffler</option>
            <option>Side Mirror</option>
            <option>Windshield</option>
            <option>Rim</option>
            <option>Seat</option>
            <option>Handle Bar</option>
            </select>
            <td><button class="btn btn-primary btn-lg"  name="" type="submit">Search Part</button></td>
    </div></div>
</form>
        </table>

如何将模型放入脚本中？提前感谢先生和女士:)

Answer 1

创建一个可以使用值访问的地图，如下所示

var map = {
    Kawasaki: ['-Curve', '-Boxer 150', '-CT100', '-Fury'],
    Honda   : ['-BeAT 110', '-Wave', '-CB110', '-TMX Supremo'],
    Suzuki  : ['-Nex 115', '-Thunder 125', '-Hayate 125', '-Skydrive 125'],
    Yamaha  : ['-Mio 125', '-Mio Soul', '-Fino', '-Vega']
};

然后你可以像这样使用它

$(function () {
  $("#Model").prop("disabled", true);
  $("#Brand").change(function () {
      if (this.value in map) {
        $('#Model').prop('disabled', false).empty();
        var brands = map[this.value];
        $.each(brands, function() {
            $('#Model').append(
                $('<option />', {value : this, text : this})
            );
        });
        $("#Model").selectmenu("refresh", true);
    } else {
        $("#Model").prop("disabled", true).val("").selectmenu("refresh", true);
    }
  });
});

小提琴