0

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>

5
  • 1
    Покажите код, которые у вас уже есть
    – ThisMan
    14 фев 2017 в 7:45
  • html и сss? или только html?
    – Ivan
    14 фев 2017 в 8:11
  • @Ivan копируйте все коды сюда в виде текста
    – perfect
    14 фев 2017 в 8:19
  • Примите правку, добавил сниппет в ваш вопрос.
    – br3t
    14 фев 2017 в 9:38
  • большое спасибо)
    – Ivan
    14 фев 2017 в 9:39

1 ответ 1

0

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

$("#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>

3
  • синхронизация все отлично спс) осталось, стрелочку сделать)
    – Ivan
    14 фев 2017 в 10:57
  • background: url(../img/arrow.png) no-repeat 99%, url(../img/select-bg.jpg) repeat-x;
    – Ivan
    15 фев 2017 в 7:23
  • первая картинка самой стрелочки, вторая бекграунд всего селектора, нужной высотой и шириной 1пиксель что бы меньше места занимать))
    – Ivan
    15 фев 2017 в 7:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.