Unabhängige Reihen von ausgewählten Eingängen

Question

Ich versuche, einen Weg zu finden, etwas zu tun, aber es ist ziemlich schwer zu erklären. Ich habe im Wesentlichen 4 dynamische Auswahl-Eingänge. Wenn eine Option ausgewählt ist, wird ein Ajax-Aufruf ausgelöst. So funktioniert es. Ich habe folgende Dataset

array:4 [ 
    "data" => array:2 [ 
    2015 => array:2 [ 
     "english" => array:1 [ 
     "chips" => array:1 [ 
      0 => "img1.png" 
     ] 
     ] 
     "french" => array:1 [ 
     "mussles" => array:1 [ 
      0 => "img1.png" 
     ] 
     ] 
    ] 
    2016 => array:2 [ 
     "indian" => array:1 [ 
     "madras" => array:1 [ 
      0 => "img1.png" 
     ] 
     ] 
     "italien" => array:1 [ 
     "pasta" => array:1 [ 
      0 => "img1.png" 
     ] 
     ] 
    ] 
    ] 
] 

angemessen auf die richtigen Daten angezeigt werden ich die folgende

<select id="year" class="form-control"> 
    @foreach($fileData["data"] as $year => $countries) 
     <option value="{{ $year }}">{{ $year }}</option> 
    @endforeach 
</select> 

<select id="country" class="form-control hide"> 
    @foreach($fileData["data"] as $year => $countries) 
     @foreach ($countries as $country => $dishes) 
      <option class="year-{{ $year }} hide" value="{{ $country }}">{{ $country }}</option> 
     @endforeach 
    @endforeach 
</select> 

<select id="dish" class="form-control hide"> 
    @foreach($fileData["data"] as $year => $countries) 
     @foreach ($countries as $country => $dishes) 
      @foreach ($dishes as $dish => $images) 
       <option class="year-{{ $year }} country-{{ $country }} hide" value="{{ $dish }}">{{ $dish }}</option> 
      @endforeach 
     @endforeach 
    @endforeach 
</select> 

So die zweite und dritte Auswahl versteckt sind, bis die vorherige gewählt wird. Innerhalb JavaScript ich

var getSelectedYear = function() { 
    return $("#year option:selected").val(); 
} 

var getSelectedCountry = function() { 
    return $("#country option:selected").val(); 
} 

$('#year').change(function() { 
    $("#country option.year-" + getSelectedYear()).removeClass('hide'); 
    $("#country").removeClass('hide'); 
}); 

$('#country').change(function() { 
    $("#dish option.year-" + getSelectedYear() + ".country-" + getSelectedCountry()).removeClass('hide'); 
    $("#dish").removeClass('hide'); 
}); 

$('#dish').change(function() { 
    triggerImageChange(); 
}); 

Also, wenn ich 2015 in der ersten Auswahl wählen, die zweite Auswahl ist Englisch und Französisch. Wenn ich dann Englisch wähle, zeigt die dritte Auswahl Chips an. Ich zeige schließlich ein Bild, das auf den Auswahlen basiert, und dies geschieht über einen Ajax-Aufruf.

Das funktioniert also gut. Jetzt auf der linken Seite habe ich einen Vergleichslink. Wenn dies angeklickt wird, muss ich die vorherige Auswahl deaktivieren, die geradlinig ist

$('#comparison').click(function (event) { 
    event.preventDefault(); 

    $('#year, #country, #dish').prop('disabled', true); 
}); 

Das Problem ist das. Ich muss jetzt eine neue Reihe von Auswahlen zeigen, damit der Vergleich durchgeführt werden kann. Im Idealfall möchte ich nicht diesen ganzen Code wiederholen, das wäre zu viel Code.

Allerdings brauche ich diese Zeile von wählt, um unabhängig von der ursprünglichen Zeile zu handeln.

Wäre das möglich?

Dank

Answer 1

Ich glaube, Sie wählt mit einem Behälter div Element wickeln sollte.

Auf diesem Element müssen Sie eine ID platzieren, also sollten Sie die IDs aus der Auswahl entfernen, und verwenden Sie etwas anderes zu unterscheiden, wie ein bestimmter Stil oder ein Dataset-Element oder nur das Attribut name ist in Ordnung.

In jQuery zeigen Sie auf Ihren div-Container, um alle Ihre Elemente zu finden.

Auf diese Weise können Sie alle Box erstellen, die Sie mit den 3 auswählen müssen, und der einzige Unterschied wird die Container-ID sein.