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

Question

I'm new to JavaScript and jQuery. I'm trying to create something for a website I'm working on, but I can't figure this out.

How can I get jquery to show or hide a select option of a dropdown, based on the selected data attribute of another dropdown?

IE, selecting option 2 in the first dropdown will show only options 1 and 3 in the second menu, and vice versa?

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

In English:

Whenever make-id changes, get the data-id field from it.

Select all the options under model-id then filter for ones that don't have the same data-make value. Hide those.

Select all the options under model-id then filter for the ones that do have the same data-make value. Show those.

Answer 2

TL;DR

I've changed the way your code works a little to make it work better for the way you want it to. Take a look at this fiddle .

---

So first of all, you can easily define a callback on the change event which can filter the second select box's option visibility. One problem you may come into if you do this is that "hidden" options will still be in the select's value if they were previously selected (as in Franz's answer ).

Here's a slightly different approach in which everything is emptied and loaded dynamically from a JSON object that you define initially:

1. Define your JSON object (data model)

This could come from a database as well of course.

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. Define methods to populate each select

Your rules are simple:

• To populate the makes, you need no conditions
• To populate the models, you need a make ID (foreign key)

---

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
        );
  });
}

The function above is simply emptying the #make_id select box, then looping the makes in the JSON data object and appending a new option element to the makes select for each result, setting the attributes as it goes.

Then to populate the models, we do the same thing for models as we did for makes, except we'll ignore any models that are for a different 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. Simplified HTML

Once you've got that framework, your HTML and event handlers are going to be very simple.

The HTML select boxes don't need any options since they're populated dynamically, although you may want to leave the ones you have there already in place to help with older browsers or browsers with Javascript turned off (cringe):

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

4. Create your jQuery event handler

...and glue it all together:

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

The trick above is that once you've populated the makes and defined your event handler for when the makes select box changes, you can to trigger the change event manually - this will cause populateModels() to be called with the first make in the list, and have the models for that make populated too.

Answer 3

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

 <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>