Question

我有两个选择列表，
选择列表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>

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

如果用户在首次选择中选择 诺基亚 ，则第二次选择中只能显示 Lumia 手机名单。像这样，对于其他手机。

在首选列表中选择无时，第二个选择列表不应显示任何内容，但没有任何选项仍然可见（如禁用按钮）。

如何使用jQuery实现这一目标？

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

Answer 1

我建议：

/* 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();
});

JS Fiddle demo

参考文献：

Attribute-starts-with ([attribute^="value"]) selector。
filter()。
hide()。
prop()。
show()。

Answer 2

我认为你在寻找：

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

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

只有我选择Id才能更轻松地选择Jquery。在我禁用任何选择的控件之前，当第一个选择更改时，我保留与option[value*='" + value +"']"匹配的选项。

Live demo here

Answer 3

有一个jQuery插件可以很好地处理这个确切的情况：http://www.appelsiini.net/projects/chained。

Answer 4

您应该考虑使用两个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="...

使用jQuery的分层选择列表

4 个答案: