Изменить параметры выбора на основе другого выбора

Question

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

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

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

Я сделал это с javascript.

    {
        if(x == 1)
        { 
            id_mentese = 1; 
        }

        $('#model option:selected').removeAttr('selected');
        $('#model').find('option[value='+id_model+']').attr("selected","selected");
        thistext=$('#model option:selected').text();
        $('.form-control').find('button[data-id="model"]').attr("title",thistext);
        $('button[data-id="model"]').find('.filter-option').text('').text(thistext);
    }

, где x - идентификатор бренда

Любая идея, как это сделать это ? Также, если бы я мог сделать так, чтобы, если пользователь не выбрал марку, то модель dopdown не должна быть активной. Заранее спасибо.

Answer 1

HTML

<select id="brand">
  <option value="none">-- Select a brand --</option>
  <option value="samsung">Samsung</option>
  <option value="htc">HTC</option>
</select>
<select id="cat" style="display:none;">
</select

JS

var models = [
  ["A","C","M","J","H"],
  ["htc1","htc2","htc3"]
]; //load this from database

$("#brand").change(function(){
  var ind = $("#brand option:selected").index();
  if(ind == 0){
    $("#cat").hide();
  }else{
    $("#cat").empty();
    $.each(models[ind + 1], function(key) {
      $("#cat").append($("<option></option>").attr("value", key).text(key));
    });
  }
});