Показать Скрыть параметры выбора на основе предыдущего выпадающего списка

Question

Спасибо, что прочитали мой вопрос ...; -)

Я создаю сайт Wordpress, который использует пользовательские сообщения и пользовательские поля для отображения инвентаря автомобиля.Я бы хотел, чтобы посетитель мог фильтровать сообщения по таксономиям ...

Плагин, который я использую для детализации доступных таксономий (запросов нескольких таксономий), выводит все варианты, которые он может найти для этой конкретной таксономии, в выпадающийlist.

Чтобы раскрывающийся список (например, модель) не становился слишком длинным, я хотел бы отображать только те параметры, которые основаны на предыдущем выборе.

Поэтому, когда посетитель выбирает автомобиль= Автомобили, раскрывающийся список для производителя должен отображать только производители автомобилей.Когда посетитель выбирает производителя, то есть Ford, в следующем раскрывающемся списке для выбора модели должны отображаться только модели, доступные для предыдущего выбранного производителя, в этом случае Ford ...

Метки и значения уровня 0 donНе меняется, но когда я добавляю или меняю производителя или модель, уровень 1 и / или уровень 2 меняется.

Не так важно, но, если возможно, было бы неплохо удалить все ненужноеотображаться в «фильтрованном» раскрывающемся списке.В случае выпадающего списка Производитель уровень 0 и все пробелы не нужны.В случае раскрывающегося списка Модель, уровень 0, уровень 1 и все пробелы не нужны после выбора.

Вот пример того, как выглядит HTML-код, сгенерированный плагином:

<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
    <option></option>
    <option class="level-0" value="cars" >Cars</option>
    <option class="level-0" value="motorcycles" >Motorcycles</option>
</select>

<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
    <option></option>
    <option class="level-0" value="cars" >Cars</option>
    <option class="level-1" value="ford" >&nbsp;&nbsp;&nbsp;Ford</option>
    <option class="level-1" value="chevrolet" >&nbsp;&nbsp;&nbsp;Chevrolet</option>

    <option class="level-0" value="motorcycles" >Motorcycles</option>
    <option class="level-1" value="honda" >&nbsp;&nbsp;&nbsp;Honda</option>
    <option class="level-1" value="yamaha" >&nbsp;&nbsp;&nbsp;Yamaha</option>    
</select>

<label for="qmt-model">Model:</label>
<select id="qmt-model" name="model">
    <option></option>
    <option class="level-0" value="cars" >Cars</option>
    <option class="level-1" value="ford" >&nbsp;&nbsp;&nbsp;Ford</option>
    <option class="level-2" value="model-1-ford" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option>
    <option class="level-2" value="model-2-ford" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option>
    <option class="level-2" value="model-3-ford" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>
    <option class="level-1" value="chevrolet" >&nbsp;&nbsp;&nbsp;Chevrolet</option>
    <option class="level-2" value="model-1-chevrolet" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option>
    <option class="level-2" value="model-2-chevrolet" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option>
    <option class="level-2" value="model-3-chevrolet" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>    

    <option class="level-0" value="motoren" >Motorcycles</option>
    <option class="level-1" value="honda" >&nbsp;&nbsp;&nbsp;Honda</option>
    <option class="level-2" value="model-1-honda" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option>
    <option class="level-2" value="model-2-honda" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option>
    <option class="level-2" value="model-3-honda" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>
    <option class="level-1" value="yamaha" >&nbsp;&nbsp;&nbsp;Yamaha</option>
    <option class="level-2" value="model-1-yamaha" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option>
    <option class="level-2" value="model-2-yamaha" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option>
    <option class="level-2" value="model-3-yamaha" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>
</select>

Я могу сделать несколько простых вещей с Javascript, но это не так просто для меня, извините...; -)

Может кто-нибудь помочь мне разобраться, как это сделать в Javascript / JQuery?Кросс-браузер был бы хорош!

* РЕДАКТИРОВАТЬ * HTML-код показывает код, отправленный в браузер.Поскольку я не могу так сильно изменить плагин, я бы хотел "манипулировать" этим кодом, чтобы он работал так, как я хочу ... ;-) Единственные исправленные вещи: метки для выпадающих списков и значения для всехЭлементы класса = "level-0".

Таким образом, "Автомобили" и "Мотоциклы" всегда останутся и никогда не изменятся.НО оттуда все гибко изменить.Т.е. когда нет сообщений для отображения Chevy, Chevy не будет в сгенерированном HTML.Таким образом, плагин показывает только выпадающие опции для предметов, которые действительно есть и могут быть найдены.Поэтому, когда Форд вообще не будет доступен, Форд не будет в выпадающем списке ...

Я скорее не буду составлять заранее определенный список Производителей и их Моделей.

Answer 1

Я бы посоветовал вам хранить данные в javascript, поэтому вам нужно только показать необходимые опции для каждой модели, не скрывая некоторые из них.

Я поставил это на jsfiddle, но сайт продолжает ломаться. Код ниже был проверен и работает, хотя.

Хорошо Работает сейчас:

<script type="text/javascript">
var vehicles = {"Cars": {
            "Ford" : [ "Fiesta", "Focus", "Fusion"], 
            "Chevy": [ "Malibu", "Corvette", "Tahoe"],
            },
 "Motorcycles": {
      "Honda": ["model 1", "model 2", "model 3"],
      "Yamaha": ["model 1", "model 2", "model 3", "model 4"]
    }
};


$(document).ready(function() {
  var $vehiclesList = $("#qmt-vehicle");
  var $manufList = $("#qmt-manufacturer");
  var $modelList = $("#qmt-model");
  var selectedType = null
  var selectedManuf = null;
  $.each(vehicles, function(key, vehicle) {
    $vehiclesList.append($("<option/>", {value:key,text:key}));
  });

  $vehiclesList.bind("change", function() {
    selectedType = $(this).val();
    if (selectedType && vehicles[selectedType]) {
      var manufacturers = vehicles[selectedType];
       $("#qmt-manufacturer option").not(":first").remove();
      $("#qmt-model option").not(":first").remove();
      $.each(manufacturers, function(key, manufacturer) {
         $manufList.append($("<option/>", { value: key, text: key}));
      });
    }
  });

 $manufList.bind("change", function() {
    var selectedManuf = $(this).val();
     $("#qmt-model option").not(":first").remove();
    if (selectedManuf  && vehicles[selectedType] && vehicles[selectedType][selectedManuf]) {
      var models = vehicles[selectedType][selectedManuf];      
      $.each(models, function(key, model) {
         $modelList.append($("<option/>", { value: model, text: model}));
      });
    }
  });

 });
</script>

Тогда на вашей странице у вас будет

<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
    <option></option>

</select>

<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
  <option></option>
</select>

<label for="qmt-model">Model:</label>
<select id="qmt-model" name="model">
  <option></option>
</select>

Answer 2

подписаться на события select elements 'onchange: http://www.w3schools.com/jsref/event_onchange.asp. В обработчике событий прочитайте текущее выбранное значение и, соответственно, заполните остальные элементы.