Вёрстка: Зависимый выпадающий список

[Александр.Т.]

Здравствуйте. В макете попалась форма поиска в виде зависимого выпадающего списка, где сначала нужно выбрать "Brend"  и в зависимости от выбранного бренда, выбрать "Product" , потом уже нажимать Submit. Вопрос заключается в том, как правильно верстать такие формы поиска, чтобы можно было дальше передать программистам ? 

[wwt]

Вы предлагаете всем представить внешний вид, того что вам нужно сверстать, чисто исходя из собственной фантазии?

[Switch74]

Верстать можно по разному.

Два пустых селекта + ассоциативный массив на js который будет содержать список из первого селекта в качестве ключей, а в значении массив строк для зависимого списка. Все это обрабатывать не большим скриптиком.

var selects = {"1":[11,12],"2":[21,22]};первый селект заполняем при загрузке$.each(selects,function(i, val){  $('.select1').append($("<option></option>").attr("value",i).text(i));}на первый селект вешаем обработчик на событие change$('.select1').on('change',function(){  $('.select2').clear();  $.each(selects[$(this).val()],function(i, val){      $('.select2').append($("<option></option>").attr("value",i).text(val));    }});

что-то вроде

[Александр.Т.]

я не очень понимаю js т.к только месяц изучаю html и css...  <div> и <a>  для стилизации стандартного select'a. Чтобы при выборе из select1 какого нибудь из брендов в select2 выходил какой-то определённый вид продукции. И потом передавалась комбинация из этих двух значений. Я так понимаю чтобы вёрстка была готовой к этой форме нужно подключить JS для обработки этих двух Select и всё ? а потом передавать работу тем, кто занимается PHP ? 

 вот моя форма:

 

 

<form class="form-search" action="action.php" method="POST" id="search">

  <div class="select-outer">

     <select class="select1" name="brand" size="1">

 

      <option class="lab" label="Brand">Brand</option>

      <option value="LG">LG</option>

      <option value="Apple">Apple</option>

      <option value="Android">Android</option>

      <option value="Nokia">Nokia</option>

   </select>

          <a class="select-button">v</a>

  </div>

<div class="select-outer">

   <select class="select2" name="product" size="1">

 

      <option label="product">product</option>

      <option value="monitor">monitor</option>

      <option value="notebook">notebook</option>

      <option value="pc">pc</option>

      <option value="smartfon">smartfon</option>

   </select>

         <a class="select-button bot">v</a>

  </div>

<input class="sub-search" type="submit" value="Search">

  <p>Search any product in our database.</p>

</form>

[Switch74]

а в чем тут зависимость?
Apple делает все из ниже перечисленного
Android даже не представляю что из этого делает

если вам нужно, чтобы при выборе какого-то пункта в первом селекте во втором не нужные поля скрывались, то можно для второго селекта указать зависимость от первого

<option label="product" data-brand='["Brand","LG","Apple","Android","Nokia"]'>product</option><option value="monitor" data-brand='["LG","Apple"]'>monitor</option><option value="notebook" data-brand='["LG","Apple"]'>notebook</option>...

ну а дальше так же привязываем событие change на select1
и проверяем присутствует ли в массиве data-brand из $('.select2 option') выбранные бренд, если да, то показываем option иначе скрываем

[Александр.Т.]

 

а в чем тут зависимость?

Apple делает все из ниже перечисленного

Android даже не представляю что из этого делает

если вам нужно, чтобы при выборе какого-то пункта в первом селекте во втором не нужные поля скрывались, то можно для второго селекта указать зависимость от первого

<option label="product" data-brand='["Brand","LG","Apple","Android","Nokia"]'>product</option><option value="monitor" data-brand='["LG","Apple"]'>monitor</option><option value="notebook" data-brand='["LG","Apple"]'>notebook</option>...

ну а дальше так же привязываем событие change на select1

и проверяем присутствует ли в массиве data-brand из $('.select2 option') выбранные бренд, если да, то показываем option иначе скрываем

 

Спасибо большое !