使用JQuery Chained插件链接“双向”

时间:2014-01-13 13:34:19

标签: javascript jquery chained

我的问题很简单。考虑一下普通汽车品牌 - 模型示例如下所示:

<select id="brand">
    <option value="">Choose</option>
    <option value="audi" class="a1 a3 a4">Audi</option>
    <option value="bmw" class="3-series 5-series 7-series">BMW</option>
</select>

<select id="model">
    <option value="">Choose</option>
    <option value="A1" class="audi">A1</option>
    <option value="A3" class="audi">A3</option>
    <option value="A4" class="audi">A4</option>
    <option value="3-series" class="bmw">3-series</option>
    <option value="5-series" class="bmw">5-series</option>
    <option value="7-series" class="bmw">7-series</option>
</select>

我可以使用JQuery Chained插件轻松地将模型链接到品牌,如下所示:

$("#model").chained("#brand");

但是我想让它以的方式工作。因此,如果汽车品牌选择为空,我想要完整的模型列表。在第二个选择中选择A1将在第一个下拉列表中选择奥迪。

我只是添加了这一行:

$("#brand").chained("#model");

But that doesn't work, as it renders both selects readonly (see jsFiddle).有没有办法实现我的目标?

1 个答案:

答案 0 :(得分:0)

不熟悉链式功能,但你应该能够做到这样的事情:

$("#brand").change(function(){
  if($("#model").val()==""){
    $("#model").val($("#brand:selected").attr("class"));
  }
});