javascript - 如何根据数据属性定位选择选项？

Question

我是 JavaScript 和 jQuery 新手。我正在尝试为我正在开发的网站创建一些东西，但我无法弄清楚这一点。

如何让 jquery 根据另一个下拉列表的选定数据属性显示或隐藏下拉列表的选择选项？

IE，在第一个下拉菜单中选择选项 2 将仅在第二个菜单中显示选项 1 和 3，反之亦然？

$(document).ready(function() {
    $("#make_id").change(function() {
        /* basically if data-make is = to selected data-id option, show option, 
           if it isn't, hide this option. seems, simple, but I can't figure it out... */
    })
})

<select id="make_id" >
  <option value="make option 1" data-id="18">option 1</option>
  <option value="make option 2" data-id="42">option 1</option>
</select>

<select id="model_id" >
  <option value="model option 1" data-make="42">option 1</option>
  <option value="model option 2" data-make="18">option 2</option>
  <option value="model option 3" data-make="42">option 3</option>
</select>

Answer 1

$("#make-id").change(function(e){
    var currentMake = $("#make-id").data("id");
    $("#model-id option").not("[data-make='"+currentMake+"']").hide();
    $("#model-id option").filter("[data-make='"+currentMake+"']").show();
}

英文:

每当 make-id 更改时，从中获取 data-id 字段。

选择 model-id 下的所有选项，然后筛选不具有相同 data-make 值的选项。隐藏那些。

选择 model-id 下的所有选项，然后筛选具有相同 data-make 值的选项。显示那些。