Farklı değerlerdeki açılır menülerden filtre seçenekleri

Question

Bu yararlı konuya dayanarak, Use jQuery to change a second select list based on the first select list option Amacımı, amacım için uyarlamaya çalışıyorum.

Sorunum, bazı nedenlerden ötürü 2 seçimimde tam olarak aynı tamsayı değerlerine sahip olmamam.

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

değiştirilecek js ise: Ben alt dizeleri ve benzeri şeyler çıkarmak için bazı js tekniği olduğunu biliyoruz

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

}); 

Ben sadece yakın bir şey sağlayabilir. Ama becerilerim tam olarak nasıl olduğunu söylemek için pek iyi değil. Bana yardım etmek isteyen var mı? İkinci seçenekleri, değerleri temel alınarak (ama aynı değil) ilk değerlere göre filtrelemem gerekiyor. Umarım kendimi yeterince açıklamıştım. Çok çok teşekkürler!

DÜZENLEME yeterince kendimi açıklayan değil tüm üzgün ait

İlk. işaretleme'u değiştiremediğimi eklemeliyim!

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

en azından prensipte iş gibi görünüyor: yüzden Shiran nazik şöyle hazırlamak için beni teslim kodundan önce bir her döngü takılı. Yine de, benim için belirsiz kalan sebeplerden ötürü, seçenek filtrelerime veri filtresi ekleme girişimi kabul edilmedi. Bu yüzden işe yarayan sınıflara gitmek zorundaydım (en azından döngü için).

Sonra aşağıdaki ile biten kodunu değiştirmek çalıştı:

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

}); 

Ama tahmin edebileceğiniz gibi bu işe yaramadı. :-( Ayrıca, filtre dizilimimin değerlerinin, seçtiğim seçenekler arasından seçmediğim sınıfın (orijinaldeki filtre değerine analog olabilir) olduğunu da not ettim ama açıkça Shorans kodu işe yaradı. ? yanlış burada bu şimdiden çok teşekkürler !! I gri saçları alıyorum Lütfen yardım

(this) .data ("seçenekler")

Answer 1

$ alır : burada

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

bir çalışma var sürüm: (ikinci seçimde ve son döngüde javascript bölümündeki veri filtresini nasıl kullandığımı fark edin)

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