Стилизация, синхронизация select

551

14 февраля 2017, 20:45

1.Нужно стилизовать select, стрелочку я убрал, background линейный вертикальный задал, не могу стрелочку сделать... select вложенный в форму...

2.Нужно синхронизировать несколько select между собой, и так, есть 4-шт select, первый select обычный, остальные 3 disabled, при клике на первый select вторую option - второй select становится не disabled, все остальные кроме первого и второго select остаются disabled, при клике на первый select третью option - третий select становится не disabled, все остальные кроме первого и третьего select остаются disabled, так же с последним select...

select { 
  display: block; 
  width: 200px; 
  cursor: pointer; 
  padding-left: 9px; 
  position: relative; 
  appearance: none; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  -ms-appearance: none; 
  background-image: -moz-linear-gradient(top, #F4F3F1 0%, #fff 100%); 
  background-image: -webkit-linear-gradient(top, #F4F3F1 0%, #fff 100%); 
  background-image: -ms-linear-gradient(top, #F4F3F1 0%, #fff 100%) 
}

<form action=""> 
  <select class="select"> 
    <option selected class="region">Region</option> 
    <option class="category">Category</option> 
    <option disabled>ds</option> 
    <option class="date">Date</option> 
    <option class="prise">Price</option> 
  </select> 
  <select class="select border-radius" disabled id="catefory"> 
    <option selected>Category</option> 
    <option>3</option> 
    <option>3463</option> 
    <option>64</option> 
  </select> 
  <select class="select border-radius" disabled id="date"> 
    <option selected>Date</option> 
    <option>34</option> 
    <option>43</option> 
    <option>46</option> 
  </select> 
  <select class="select border-radius" disabled id="prise"> 
    <option selected>Price</option> 
    <option>6</option> 
    <option>346</option> 
    <option>3446</option> 
  </select> 
</form>

Answer 1

Код для синхронизации примерно такой:

$("#main-select").change(function() { 
  var activeSelect = $(this).find("option:selected").attr("class"); 
  $(".select:not(#main-select)").attr("disabled","disabled"); 
  $("#" + activeSelect).removeAttr("disabled"); 
});

select { 
  display: block; 
  width: 200px; 
  cursor: pointer; 
  padding-left: 9px; 
  position: relative; 
  appearance: none; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  -ms-appearance: none; 
  background-image: -moz-linear-gradient(top, #F4F3F1 0%, #fff 100%); 
  background-image: -webkit-linear-gradient(top, #F4F3F1 0%, #fff 100%); 
  background-image: -ms-linear-gradient(top, #F4F3F1 0%, #fff 100%) 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<form action=""> 
  <select class="select" id="main-select"> 
    <option selected class="region">Region</option> 
    <option class="category">Category</option> 
    <option disabled>ds</option> 
    <option class="date">Date</option> 
    <option class="price">Price</option> 
  </select> 
  <select class="select border-radius" disabled id="category"> 
    <option selected>Category</option> 
    <option>3</option> 
    <option>3463</option> 
    <option>64</option> 
  </select> 
  <select class="select border-radius" disabled id="date"> 
    <option selected>Date</option> 
    <option>34</option> 
    <option>43</option> 
    <option>46</option> 
  </select> 
  <select class="select border-radius" disabled id="price"> 
    <option selected>Price</option> 
    <option>6</option> 
    <option>346</option> 
    <option>3446</option> 
  </select> 
</form>