根据另一个选择更改选择选项

Question

我最近一直在试验 Php 和 CodeIgniter，并创建了一个简单的项目，您可以在其中下订单。 现在在订单上有一些选项，用户可以从下拉菜单中选择他/她想要的东西。 我设法显示了数据库中的可用选项，现在我想要做的是当用户从下拉菜单之一中选择一个选项时，下一个显示选项的下拉菜单仅与该选择相关联。

例如，更具体地说，假设用户将购买手机，首先他应该选择品牌，比如三星，现在下一个下拉菜单应该只显示来自三星的型号，而不是来自其他品牌的型号。

到目前为止，我所做的是当用户选择品牌时，我会在下一个下拉菜单中选择该品牌的型号，但如果他点击更多选项，则所有品牌的所有型号都将可用。

我已经用 javascript 做到了。

    {
        if(x == 1)
        { 
            id_mentese = 1; 
        }

        $('#model option:selected').removeAttr('selected');
        $('#model').find('option[value='+id_model+']').attr("selected","selected");
        thistext=$('#model option:selected').text();
        $('.form-control').find('button[data-id="model"]').attr("title",thistext);
        $('button[data-id="model"]').find('.filter-option').text('').text(thistext);
    }

其中 x 是品牌的 id

知道如何做到这一点吗？ 此外，如果我可以做到这一点，如果用户不选择品牌，则模型下拉不应该处于活动状态。 提前致谢。

Answer 1

HTML

<select id="brand">
  <option value="none">-- Select a brand --</option>
  <option value="samsung">Samsung</option>
  <option value="htc">HTC</option>
</select>
<select id="cat" style="display:none;">
</select

JS

var models = [
  ["A","C","M","J","H"],
  ["htc1","htc2","htc3"]
]; //load this from database

$("#brand").change(function(){
  var ind = $("#brand option:selected").index();
  if(ind == 0){
    $("#cat").hide();
  }else{
    $("#cat").empty();
    $.each(models[ind + 1], function(key) {
      $("#cat").append($("<option></option>").attr("value", key).text(key));
    });
  }
});