Javascript 使用jQuery的分层选择列表

我有两个选择列表，
选择列表1包含手机品牌名称

<select name="mobile-phone" class="mobile-phone">
    <option value="Select">Select</option>
    <option value="Nokia">Nokia</option>
    <option value="Samsung">Samsung</option>
    <option value="HTC">HTC</option>
    <option value="Apple">Apple</option>
</select>

挑选
诺基亚
三星
宏达电
苹果

选择列表2包含以下电话类型

<select name="mobile-model" class="mobile-model">
    <option value="Select">Select</option>
    <option value="Nokia--Lumia-520">Lumia 520</option>
    <option value="Nokia--Lumia-620">Lumia 620</option>
    <option value="Samsung--Galaxy-s3">Galaxy S3</option>
    <option value="Samsung--Galaxy-s4">Galaxy S4</option>
    <option value="HTC--hero">Hero</option>
    <option value="HTC--one">One</option>
    <option value="Apple--iphone4">iPhone 4</option>
    <option value="Apple--iphone5">iPhone 5</option>
</select>

挑选
卢米亚520
卢米亚620
星系S3
星系S4
英雄
一个
iPhone4
iPhone5

我的任务是根据用户在选择列表1中选择的值显示选择列表2

如果用户在第一次选择中选择了Nokia，则第二次选择列表中只应显示Lumia手机。就像其他手机一样

当在第一个选择列表中选择了无时，第二个选择列表不应显示任何内容，但在没有任何选项的情况下仍然可见（如禁用按钮）

如何使用jQuery实现这一点

---

<>我从上面的选择列表中做出。

你应该考虑有两个MySQL表：品牌，模型。品牌表只是带有ID的品牌列表。模型表将包含一个品牌列，您可以在其中输入这些ID

然后，您应该对所选品牌执行JSON查询，并相应地返回一个选择列表

通过这种方式，您将拥有一个深入的数据库，可以通过多种方式调用和操作该数据库

或者，您可以执行以下操作：

$(".mobile-phone").on("change", function(){
  var brand = $(this).val();
  $("[data-brand]").hide();
  $("[data-brand="+brand+"]").show();
});

这样做：

<option data-brand="Nokia" value="...

---

我想您正在寻找：

$("#sel2").prop("disabled", true);

$( "#sel1" ).change(function() {
  var value = $(this).val();
    $("#sel2").prop("disabled", false);
    $("#sel2 > option").hide();
    $("#sel2 > option[value*='" + value +"']").show();
});

只有我将selects Id放在Jquery中，以便更容易地进行选择。在我禁用任何选择的控件等待之前，当第一个选择仅更改时，我保留使用
选项[value*='“+value+”]]”的macth选项

我建议：

/* select the select element whose name is "mobile-phone",
   assign an event-handler for the 'change' event:
*/
$('select[name="mobile-phone"]').change(function () {
    // get the relevant/selected brand-name:
    var brand = this.value;
    /* find the option elements inside of the select element with
       name="mobile-model", enable them all:
    */
    $('select[name="mobile-model"] option').prop('disabled', false)
    // show them all:
        .show()
    // filter the collection, to find only those whose value does not start with the brand-name:
        .filter(function () {
            return !(this.value.indexOf(brand) === 0);
        })
        // disable those elements:
        .prop('disabled', true)
        // hide them:
        .hide();
});


参考资料：







有一个jQuery插件可以很好地处理这种情况：。
如果我有使用ID的特权，那么我就不会为选项设置如此疯狂的值，比如
来建立两个选择列表之间的关系……顺便说一句，这里没有MySQL或PHP，只涉及纯HTML和JS，这是一个讽刺！请参阅我的编辑以获得jQuery的替代方案。