2
私は何かのやり方を理解しようとしていますが、説明するのはかなり難しいです。私は本質的に4つの動的選択入力を持っています。オプションが が選択されると、ajax呼び出しが発生します。これはどのように動作するのですか？私は適切に前のものが選択されるまで隠されているので、第二と第三の選択選択入力の独立した行
<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>
次私は、正しいデータを表示するには、次のデータセットに
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"
]
]
]
]
]
を持っています。私は最初の選択で2015を選択した場合 はJavaScript以内に私は
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();
});
を行うので、第2の選択は、英語とフランス語を表示します。私が英語を選択すると、3番目の選択でチップが表示されます。私は最終的には選択に基づいて画像を表示し、これはAjax呼び出しによって行われます。
これはうまくいきます。左のメニューには比較リンクがあります。これをクリックすると、直前の選択を無効にする必要があります。
$('#comparison').click(function (event) {
event.preventDefault();
$('#year, #country, #dish').prop('disabled', true);
});
問題はこれです。私は今比較のために新しい選択行を表示する必要があります。理想的には、私はこのコードをすべて繰り返すことは望ましくない、それはあまりにも多くのコードでしょう。
ただし、この行の選択は、元の行とは独立して動作する必要があります。
これは可能でしょうか？私はあなたがコンテナのdiv要素で選択をラップするべきだと思い
おかげ