選擇輸入的獨立行

我想找出一種做法，但很難解釋。我基本上有4個動態選擇輸入。只要選擇了選項，就會觸發ajax調用。這是它的工作原理。我有以下數據集選擇輸入的獨立行

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

所以第二和第三選擇是隱藏的，直到前一個選擇。在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(); 
});

所以，如果我的第一選擇選擇2015年，第二個選擇將顯示英語和法語。如果我然後選擇英語，第三選擇將顯示芯片。我最終顯示基於選擇的圖像，並通過Ajax調用完成。

所以這工作正常。現在在左邊的菜單中我有一個比較鏈接。當點擊這個時，我需要禁用以前的選擇，這是直接的

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

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

問題是這樣的。我現在需要顯示一排新的選擇，以便進行比較。理想情況下，我不想重複所有這些代碼，這將是太多的代碼。

但是，我需要這行選擇行動獨立於原始行。

這可能嗎？

謝謝

來源

2016-08-05 kate_hudson

我想你應該包裝選擇與容器div元素。

在這個元素上你需要放置一個id，所以你應該從select中刪除id，並且使用不同的東西來區分，比如特定的樣式或者數據集元素，或者只需要name屬性就可以。

在jQuery上，您指向您的div容器以查找所有元素。

通過這種方式，您可以創建所有框您需要3選擇和唯一的區別將是容器ID。

來源

2016-08-05 16:07:16

選擇輸入的獨立行

回答

相關問題