Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Переключение <option> у стилизованного <select> (https://javascript.ru/forum/jquery/73571-pereklyuchenie-option-u-stilizovannogo-select.html)

yaparoff 25.04.2018 21:31
Переключение <option> у стилизованного <select>
 
Есть стилизованный select 
<div class="available-tab__select">
  <select data-placeholder="Ширина ботинка">
    <option>Ширина ботинка</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="ee">EE</option>
  </select>
  <div class="available-tab__select-container">
    <a class="available-tab__select-default-param">
      <span>Ширина ботинка</span>
      <div class="available-tab__select-arrow">
        <i></i>
      </div>
    </a>
    <div class="available-tab__select-list">
      <div class="available-tab__select-list-item">Ширина ботинка</div>
      <div class="available-tab__select-list-item">C</div>
      <div class="available-tab__select-list-item">D</div>
      <div class="available-tab__select-list-item">EE</div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/rvLqWq

Как реализовать переключение, чтобы при выбранном div-е выбирался соответствующий <option> у самого <select>?

И почему то не скрывается всплывающий блок при повторном нажатии

рони 25.04.2018 22:51
кастомизация селекта
 
yaparoff,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.available-tab__btn {
  display: inline-block;
  position: relative;
  width: 157px;
  height: 42px;
  line-height: 42px;
  background-color: transparent;
  border: 1px solid #fff;
  transition: color ease-out .2s, border-color ease-out .2s, background-color ease-out .2s;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  white-space: nowrap;
  vertical-align: top;
  text-transform: uppercase;
  box-sizing: border-box;
  border-color: red;
  color: red;
  background-color: transparent;
}
.available-tab__btn:hover {
  color: #000;
  background-color: #fff;
  border-color: #fff;
}
.available-tab__btn:hover {
  background-color: red;
  color: #fff;
}
.available-tab__btn--black {
  border-color: #000;
  color: #000;
  background-color: transparent;
}
.available-tab__btn--black:hover {
  background-color: #000;
  color: #fff;
}
.available-tab__link {
  display: inline-block;
  white-space: nowrap;
  color: #9b9b9b;
  text-decoration: underline;
  transition: all .4s ease-out;
}
.available-tab__link:hover {
  color: #4a90e2;
}
.available-tab__select {
  display: inline-block;
  width: 200px;
  height: 40px;
  margin-top: 30px;
  margin-right: 50px;
  cursor: pointer;
  padding: 0 !important;
  border: 1px solid grey;
}
.available-tab__select select {
  display: none;
}
.available-tab__select-container {
  width: 100%;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.available-tab__select-default-param {
  display: block;
  height: 40px;
  line-height: 40px;
  border-radius: 0;
  transition: all .2s ease-out;
  padding: 0 30px 0 10px;
  color: #4a4a4a;
}
.available-tab__select-default-param span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.available-tab__select-arrow {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  height: 40px;
  width: 40px;
  background-color: #fff;
}
.available-tab__select-arrow i {
  position: absolute;
  border: 0;
  border-right: 1px solid #4a4a4a;
  border-bottom: 1px solid #4a4a4a;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  margin-left: -3px;
  transform: rotate(45deg);
}
.available-tab__select-arrow--opened i {
  margin-top: 0;
  transform: rotate(-135deg);
}
.available-tab__select-list {
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1010;
  width: 100%;
  border-top: 0;
  background: #fff;
  border: 1px solid #ddd;
  margin-top: -1px;
  background-clip: padding-box;
  color: #444;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 15px 0;
  margin: 0;
  max-height: 188px;
}
.available-tab__select-list--opened {
  left: 0;
}
.available-tab__select-list-item {
  position: relative;
  padding: 5px 10px;
  font-size: 14px;
  color: #272727;
  line-height: 18px;
  transition: color .2s ease-out;
  word-wrap: break-word;
  cursor: pointer;
}
.available-tab__select-list-item:hover:after, .available-tab__select-list-item--selected:after {
  content: '';
  position: absolute;
  width: 7px;
  height: 12px;
  right: 15px;
  top: 50%;
  margin-top: -7px;
  border-right: 2px solid #272727;
  border-bottom: 2px solid #272727;
  transform: rotate(45deg);
}
  .available-tab__select-list-item.active {
       border: 1px solid #A9A9A9;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
   $(".available-tab__select").on("click", function(event) {
        var el = $(event.target),
            list = $(".available-tab__select-list", this),
            arrow = $(".available-tab__select-arrow", this),
            a = $(".available-tab__select-list-item", this),
            index = a.index(el),
            txt = el.text(),
            title = $(".available-tab__select-default-param span", this),
            select = $("select", this)[0];
        if (index > -1) {
           title.text(txt);
           a.removeClass("active").eq(index).addClass("active");
           select.selectedIndex = index;
        }
        if($(".available-tab__select-list--opened").not(list).length) up();
        list.toggleClass('available-tab__select-list--opened');
        arrow.toggleClass('available-tab__select-arrow--opened');

    }).find(".available-tab__select-list-item:first").addClass("active");
    function up()
    {
       $(".available-tab__select-list--opened").removeClass("available-tab__select-list--opened");
       $(".available-tab__select-arrow--opened").removeClass("available-tab__select-arrow--opened");
    }

    $(document).click(function(event) {
        if (!$(event.target).closest(".available-tab__select").length)  up()
    })
});
  </script>
</head>

<body>
<div class="available-tab__select">
  <select data-placeholder="Ширина ботинка">
    <option>Ширина ботинка</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="ee">EE</option>
  </select>
  <div class="available-tab__select-container">
    <a class="available-tab__select-default-param">
      <span>Ширина ботинка</span>
      <div class="available-tab__select-arrow">
        <i></i>
      </div>
    </a>
    <div class="available-tab__select-list">
      <div class="available-tab__select-list-item">Ширина ботинка</div>
      <div class="available-tab__select-list-item">C</div>
      <div class="available-tab__select-list-item">D</div>
      <div class="available-tab__select-list-item">EE</div>
    </div>
  </div>
</div>

<div class="available-tab__select">
  <select data-placeholder="Лезвие">
    <option>Лезвие</option>
    <option value="11,5">11,5</option>
    <option value="12">12</option>
    <option value="12,5">12,5</option>
    <option value="13">13</option>
    <option value="13,5">13,5</option>
    <option value="14">14</option>
    <option value="14,5">14,5</option>
    <option value="15">15</option>
    <option value="15,5">15,5</option>
  </select>
  <div class="available-tab__select-container">
    <a class="available-tab__select-default-param">
      <span>Лезвие</span>
      <div class="available-tab__select-arrow">
        <i></i>
      </div>
    </a>
    <div class="available-tab__select-list">
      <div class="available-tab__select-list-item">Размер</div>
      <div class="available-tab__select-list-item">11,5</div>
      <div class="available-tab__select-list-item">12</div>
      <div class="available-tab__select-list-item">12,5</div>
      <div class="available-tab__select-list-item">13</div>
      <div class="available-tab__select-list-item">13,5</div>
      <div class="available-tab__select-list-item">14</div>
      <div class="available-tab__select-list-item">14,5</div>
      <div class="available-tab__select-list-item">15</div>
      <div class="available-tab__select-list-item">15,5</div>
    </div>
  </div>
</div>
</body>
</html>

yaparoff 26.04.2018 07:51
рони, как я понял суть этого варианта, в том чтобы при клике перетиралось содержимое у элемента $(".available-tab__select-default-param span")
Но в таком случае как тогда отправлять данные на бэкэкнд? Можно ли отправить это на бэкэнд?

рони 26.04.2018 08:53
Цитата:
Сообщение от yaparoff
Можно ли отправить это на бэкэнд?
Цитата:
Сообщение от yaparoff
Как реализовать переключение, чтобы при выбранном div-е выбирался соответствующий <option> у самого <select>?
в чём вопрос?

рони 26.04.2018 09:08
yaparoff,
добавлено для демонстрации переключения селекта, тег form, name в select, out() для вывода значения
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.available-tab__btn {
  display: inline-block;
  position: relative;
  width: 157px;
  height: 42px;
  line-height: 42px;
  background-color: transparent;
  border: 1px solid #fff;
  transition: color ease-out .2s, border-color ease-out .2s, background-color ease-out .2s;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  white-space: nowrap;
  vertical-align: top;
  text-transform: uppercase;
  box-sizing: border-box;
  border-color: red;
  color: red;
  background-color: transparent;
}
.available-tab__btn:hover {
  color: #000;
  background-color: #fff;
  border-color: #fff;
}
.available-tab__btn:hover {
  background-color: red;
  color: #fff;
}
.available-tab__btn--black {
  border-color: #000;
  color: #000;
  background-color: transparent;
}
.available-tab__btn--black:hover {
  background-color: #000;
  color: #fff;
}
.available-tab__link {
  display: inline-block;
  white-space: nowrap;
  color: #9b9b9b;
  text-decoration: underline;
  transition: all .4s ease-out;
}
.available-tab__link:hover {
  color: #4a90e2;
}
.available-tab__select {
  display: inline-block;
  width: 200px;
  height: 40px;
  margin-top: 30px;
  margin-right: 50px;
  cursor: pointer;
  padding: 0 !important;
  border: 1px solid grey;
}
.available-tab__select select {
  display: none;
}
.available-tab__select-container {
  width: 100%;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.available-tab__select-default-param {
  display: block;
  height: 40px;
  line-height: 40px;
  border-radius: 0;
  transition: all .2s ease-out;
  padding: 0 30px 0 10px;
  color: #4a4a4a;
}
.available-tab__select-default-param span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.available-tab__select-arrow {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  height: 40px;
  width: 40px;
  background-color: #fff;
}
.available-tab__select-arrow i {
  position: absolute;
  border: 0;
  border-right: 1px solid #4a4a4a;
  border-bottom: 1px solid #4a4a4a;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  margin-left: -3px;
  transform: rotate(45deg);
}
.available-tab__select-arrow--opened i {
  margin-top: 0;
  transform: rotate(-135deg);
}
.available-tab__select-list {
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1010;
  width: 100%;
  border-top: 0;
  background: #fff;
  border: 1px solid #ddd;
  margin-top: -1px;
  background-clip: padding-box;
  color: #444;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 15px 0;
  margin: 0;
  max-height: 188px;
}
.available-tab__select-list--opened {
  left: 0;
}
.available-tab__select-list-item {
  position: relative;
  padding: 5px 10px;
  font-size: 14px;
  color: #272727;
  line-height: 18px;
  transition: color .2s ease-out;
  word-wrap: break-word;
  cursor: pointer;
}
.available-tab__select-list-item:hover:after, .available-tab__select-list-item--selected:after {
  content: '';
  position: absolute;
  width: 7px;
  height: 12px;
  right: 15px;
  top: 50%;
  margin-top: -7px;
  border-right: 2px solid #272727;
  border-bottom: 2px solid #272727;
  transform: rotate(45deg);
}
  .available-tab__select-list-item.active {
       border: 1px solid #A9A9A9;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
   $(".available-tab__select").on("click", function(event) {
        var el = $(event.target),
            list = $(".available-tab__select-list", this),
            arrow = $(".available-tab__select-arrow", this),
            a = $(".available-tab__select-list-item", this),
            index = a.index(el),
            txt = el.text(),
            title = $(".available-tab__select-default-param span", this),
            select = $("select", this)[0];
        if (index > -1) {
           title.text(txt);
           a.removeClass("active").eq(index).addClass("active");
           select.selectedIndex = index;
        }
        if($(".available-tab__select-list--opened").not(list).length) up();
        list.toggleClass('available-tab__select-list--opened');
        arrow.toggleClass('available-tab__select-arrow--opened');
        out();
    }).find(".available-tab__select-list-item:first").addClass("active");
    function up()
    {
       $(".available-tab__select-list--opened").removeClass("available-tab__select-list--opened");
       $(".available-tab__select-arrow--opened").removeClass("available-tab__select-arrow--opened");
    }
    function out()
    {
       $(".show").text($("form").serialize());
    }
    out();
    $(document).click(function(event) {
        if (!$(event.target).closest(".available-tab__select").length)  up()
    })
});
  </script>
</head>

<body>
    <div class="show"></div>
<form action="http://">
<div class="available-tab__select">
  <select data-placeholder="Ширина ботинка" name="width">
    <option>Ширина ботинка</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="ee">EE</option>
  </select>
  <div class="available-tab__select-container">
    <a class="available-tab__select-default-param">
      <span>Ширина ботинка</span>
      <div class="available-tab__select-arrow">
        <i></i>
      </div>
    </a>
    <div class="available-tab__select-list">
      <div class="available-tab__select-list-item">Ширина ботинка</div>
      <div class="available-tab__select-list-item">C</div>
      <div class="available-tab__select-list-item">D</div>
      <div class="available-tab__select-list-item">EE</div>
    </div>
  </div>
</div>

<div class="available-tab__select">
  <select data-placeholder="Лезвие" name="blade">
    <option>Лезвие</option>
    <option value="11,5">11,5</option>
    <option value="12">12</option>
    <option value="12,5">12,5</option>
    <option value="13">13</option>
    <option value="13,5">13,5</option>
    <option value="14">14</option>
    <option value="14,5">14,5</option>
    <option value="15">15</option>
    <option value="15,5">15,5</option>
  </select>
  <div class="available-tab__select-container">
    <a class="available-tab__select-default-param">
      <span>Лезвие</span>
      <div class="available-tab__select-arrow">
        <i></i>
      </div>
    </a>
    <div class="available-tab__select-list">
      <div class="available-tab__select-list-item">Размер</div>
      <div class="available-tab__select-list-item">11,5</div>
      <div class="available-tab__select-list-item">12</div>
      <div class="available-tab__select-list-item">12,5</div>
      <div class="available-tab__select-list-item">13</div>
      <div class="available-tab__select-list-item">13,5</div>
      <div class="available-tab__select-list-item">14</div>
      <div class="available-tab__select-list-item">14,5</div>
      <div class="available-tab__select-list-item">15</div>
      <div class="available-tab__select-list-item">15,5</div>
    </div>
  </div>
</div>
</form>
</body>
</html>


Часовой пояс GMT +3, время: 11:02.