Filter options of drop down menus with different values

Question

Based on this useful topic Use jQuery to change a second select list based on the first select list option I try to adapt the code for my purposes.

My problem is that for some reasons I cannot have the exact same integer values in my 2 selection. I only can provide something close as:

<select name="select1" id="dropDown">
  <option value="fruit">Fruit</option>
  <option value="animal">Animal</option>
  <option value="bird">Bird</option>
  <option value="car">Car</option>
</select>


<select name="select2" id="dropDown_2">
  <option value="fruit-01">Banana</option>
  <option value="fruit-02">Apple</option>
  <option value="fruit-03">Orange</option>
  <option value="animal-01">Wolf</option>
  <option value="animal-02">Fox</option>
  <option value="animal-03">Bear</option>
  <option value="bird-01">Eagle</option>
  <option value="bird-02">Hawk</option>
  <option value="car-01">BMW<option>
</select>

The js to be modified is:

$("#dropDown").change( function() {

    if ( $(this).data('options') == undefined ) {
        /*Taking an array of all options-2 and kind of embedding it on the select1*/
        $(this).data( 'options', $("#dropDown_2").find('option').clone() );
    }
    var id = $(this).val();

    var options = $(this).data('options').filter('[value=' + id + ']');

    $("#dropDown_2").html(options);

} );

I know that there are some js techniques to subtract substrings and similar stuff. But my skills are not so good to exactly say how. Is there anyone willing to help me? I need to filter the second options with its values based (but not identical) on the values of the first. Hope I explained myself sufficiently. Many many thanks!

EDIT

First of all sorry for not explaining myself sufficiently. I have to add that I cannot change the markUp ! So I inserted an each loop before the code that Shiran kindly delivered me to prepare it like so:

$("#dropDown_2").find('option').each( function() {
    var $this = $(this);
    var val = $this.val();
    var myFilter = val.slice(0,-3)
    $this.addClass( myFilter );
   // $this.data('filter', myFilter ); does not work don’t know why
} );

Which seems to work at least in principle. Yet, for reasons that remain obscure for me sadly my attempt to attach data-filter to my option elements wasn't accepted. So I had to go for classes which worked (at least for the loop).

I then tried to modify the code ending up with the following:

$("#dropDown").change(function() {
    var filters = [];
    if ($(this).attr('class') == "") {
      $(this).find("option").each(function(index, option) {
        if ($(option).attr('class') != "")
          filters.push($(option).attr('class'));
      } );
    } else {
      filters.push($(this).attr('class'));
    }

    $("#dropDown_2").html("");
    $.each(filters, function(index, value) {
      $options.find("option." + value ).clone().appendTo($("#dropDown_2"));
    } );

} );

But as you can guess this didn't work. :-( And I also noted that the values of my filter array are the class (would be analogue to the filter value in the original) of my select not of the options of it. But obviously Shorans code did work well. What did I wrong here? Please help, I am getting grey hair with this!! Thanks so much in advance!

Answer 1

$(this).data("options") gets:

 <select data-options="the data here"> ==> "the data here"

Here's a working version: (notice how I used data-filter in the second select and in the last each loop in the javascript part)

 $(document).ready(function() { var $options = $("#dropDown_2").clone(); // this will save all initial options in the second dropdown $("#dropDown").change(function() { var filters = []; if ($(this).val() == "") { $(this).find("option").each(function(index, option) { if ($(option).val() != "") filters.push($(option).val()); }); } else { filters.push($(this).val()) } $("#dropDown_2").html(""); $.each(filters, function(index, value) { $options.find("option").each(function(optionIndex, option) { // a second loop that check if the option value starts with the filter value if ($(option).val().startsWith(value)) $(option).clone().appendTo($("#dropDown_2")); }); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select name="select1" id="dropDown"> <option value="">All</option> <option value="fruit">Fruit</option> <option value="animal">Animal</option> <option value="bird">Bird</option> <option value="car">Car</option> </select> <select name="select2" id="dropDown_2"> <option value="fruit-01">Banana</option> <option value="fruit-02">Apple</option> <option value="fruit-03">Orange</option> <option value="animal-01">Wolf</option> <option value="animal-02">Fox</option> <option value="animal-03">Bear</option> <option value="bird-01">Eagle</option> <option value="bird-02">Hawk</option> <option value="car-01">BMW <option> </select>