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

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

{{1}}

英文：

每当make-id发生变化时，从中获取data-id字段。

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

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

Answer 2

TL; DR

我已经改变了代码的工作方式，使其能够以您希望的方式更好地工作。看看this fiddle。

首先，您可以轻松地在change事件上定义一个回调，它可以过滤第二个选择框的选项可见性。如果你这样做，你可能遇到的一个问题是＆＃34;隐藏＆＃34;如果以前选择了选项，则选项仍将保留在选择的值中（如Franz's answer中所示）。

这是一种略有不同的方法，其中所有内容都是从最初定义的JSON对象中清空和加载的：

1。定义您的JSON对象（数据模型）

当然，这也可能来自数据库。

var makesAndModels = {
    "makes": [
    {"option_id": 1, "id": 18, "name": "make 1"},
    {"option_id": 2, "id": 42, "name": "make 2"}
  ],
  "models": [
    {"option_id": 1, "make_id": 42, "name": "make 2: model 1"},
    {"option_id": 2, "make_id": 18, "name": "make 1: model 1"},
    {"option_id": 3, "make_id": 42, "name": "make 2: model 2"}
  ]
};

2。定义填充每个选择

的方法

您的规则很简单：

• 要填充品牌，您无需条件
• 要填充模型，您需要一个make ID（外键）

function populateMakes() {
  var $make = $('#make_id');
  // Remove all options before starting
  $make.empty();

  // Loop the makes from the JSON data object
  $.each(makesAndModels.makes, function(key, make) {
    // Append new options for each make
    $('#make_id')
      .append(
        $('<option></option>')
          .data('id', make.id) // Assign the data-id attribute
          .attr('value', 'make option ' + make.option_id) // Give it a value
          .text(make.name) // Give it a label
        );
  });
}

上面的函数只是清空#make_id选择框，然后在JSON数据对象中循环make并将新的option元素附加到每个结果的make选择中，将属性设置为去。

然后，为了填充模型，我们对模型执行与make相同的操作，除非我们忽略任何用于不同品牌的模型。

function populateModels(makeId) {
  // Assign the selector to a variable to repeated use/Don't Repeat Yourself
  var $model = $('#model_id');
  // Remove all models in the select to start
  $model.empty();

  // Loop the models in the JSON object
  $.each(makesAndModels.models, function(key, model) {
    // Ignore any models for other makes
    if (model.make_id != makeId) {
      return;
    }

    // Append the new model to the select
    $model
      .append(
        $('<option></option>')
          .data('make', model.make_id) // Assign its data-make attribute
          .attr('value', 'model option ' + model.option_id) // Give it a value
          .text(model.name) // Give it a label
      );
  });
}

3。简化的HTML

一旦你拥有了这个框架，你的HTML和事件处理程序将变得非常简单。

HTML选择框不需要任何选项，因为它们会动态填充，但您可能希望保留已有的选项以帮助使用旧版浏览器或关闭Javascript的浏览器（畏缩）：

<!-- These are populated dynamically now! -->
<select id="make_id"></select>
<select id="model_id"></select>

4。创建jQuery事件处理程序

......并将它们粘在一起：

$(document).ready(function() {
  // Populate the makes select box
  populateMakes();

  // Define what should happen when you change the make_id select
  $("#make_id").change(function() {
    // Find the currently selected make's ID from data-id
    var selectedMake = $(this).find('option:selected').data('id');
    populateModels(selectedMake);
  });

  // Trigger a change to populate the models the first time
  $('#make_id').change();
});

上面的技巧是，一旦你填充了make并定义了你的事件处理程序，当make选择框发生变化时，你可以手动触发change事件 - 这将导致{{1}使用列表中的第一个make进行调用，并为其填充模型。

Answer 3

＆＃13;

＆＃13;

$(document).ready(function() {
    $("#make_id").change(function() {
       if ($(this).val()=='make option 2') $("#model_id").find("option").eq(1).hide();
       else $("#model_id").find("option").eq(1).show();
    })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="make_id" >
  <option value="make option 1" data-id="18">option 1</option>
  <option value="make option 2" data-id="42">option 2</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>

＆＃13;

＆＃13;

＆＃13;