前の選択に基づいた動的選択オプション

Question

私は同様の質問をしばらく前に聞いたことがありますが、間違った方法でそれが起こっていることに気付きました。私はデータの配列を持って、必要に応じてそれをjsonデータにすることができます。データは次のようになります

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

構造はかなり標準、年>国>料理>イメージです。私の見解では、年を表示する選択入力があります。

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

選択した年に基づいて、使用可能な国を示す2番目のオプションを表示する必要があります。したがって、2015年を選択すると、次の選択オプションに英語とフランス語が表示されます。だから、私はこれにAjaxを使うつもりです。現時点では、私は次のものを持っています

$('#yearSelection').change(function() { 
    var selectedYear = $("#yearSelection option:selected").val(); 

    $.ajax({ 
     type: "POST", 
     url: "./productChoices", 
     data: { year : selectedYear } 
    }).done(function(data){ 

    }); 
}); 

それほど多くはありませんが、その始まりです。だから私のコントローラでは、今私は選択された年を与える年にアクセスすることができます。私は、次の選択入力のためにHTMLを返すことを計画します。

私の問題はこれです。 htmlでは、my selectがforeachループから作成され、配列$ fileDataをループしていることがわかります。私が選択すると、選択した年を渡す必要がありますが、$ fileData配列を渡す必要がありますので、次の選択で表示する必要があるデータを調べることができます。コントローラ。では、Ajaxリクエストとともに$ fileDataをどうやって渡すことができますか？それはhtml要素ではないので、私はあまりにも確実ではありません。あなたのデータセットが非常に大きくない場合、あなたはAJAXせず、それを100％にし、最速のユーザ応答を持つことができ

おかげ

Answer 1

。

第1位：すべてのオプションを使用して3つの選択肢を作成します。 ここでは配列を繰り返してオプションを描画し、javascriptで使用されるいくつかの「フィルタ」クラスを追加しました。

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

2ST：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() { 
    // Do what you want with the selected dish, you didn't specified if you want to show the images somewhere. 
}) 

注以前の選択を変更し、また、私はしませんでしたとき、あなたは元の状態にすべてをリセットする必要がありますあなたの画像を持つもの

Answer 2

あなたのajaxコールから年が得られたら、あなたの配列からその年を選択することができます。

$year = '2015'; // got from ajax 
$country = $data[$year]; 

今すぐあなたの$国は、次のデータが含まれます：

array:2 [▼ 
     "english" => array:1 [▼ 
     "chips" => array:1 [▼ 
      0 => "img1.png" 
     ] 
     ] 
     "french" => array:1 [▼ 
     "mussles" => array:1 [▼ 
      0 => "img1.png" 
     ] 
     ] 
    ] 

今、あなたのようにAJAX呼び出しから$の国を返却する必要がありますのは、あなたが今、あなたは次の操作を行い2015年に合格したとしましょうjsonデータを選択し、次の選択入力に追加します。あなたが以下のように国のリストを追加することができますので、あなたは、国としてselect要素のIDを持っているとしましょう：

var selectValues = data; // country list got from your controller 
$.each(selectValues, function(key, value) { 
    $('#countries') 
     .append($("<option></option>") 
        .attr("value",key) 
        .text(key)); // option value and text, both will be country. 
}); 

私はそれが完璧なザッツ