0

Делаю select в виде ul, li, как сделать чтобы при выборе li сверх (вывод в блок в number-select__output) появлялась название страны с флагом (т.е блок number-select__item и цифры номера с переди ?)?

var numberSelect = $('.number-select__list');
$('.number-select__flag').click(function(list) {
  numberSelect.slideToggle('fast');
  list.stopPropagation();
});

$(document).click(function() {
  numberSelect.slideUp('fast');
});
.number-select__list {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.008em;
  position: absolute;
  z-index: 2;
  display: none;
  width: 302px;
  max-height: 250px;
  white-space: nowrap;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  margin-right: 25px;
  margin-left: 25px;
  cursor: pointer;
  border: 1px solid #DADADA;
  box-sizing: border-box;
  border-radius: 5px;
  background: #FFFFFF;
  box-shadow: 0px 3px 40px rgba(0, 0, 0, 0.08);
  margin-top: 5px;
}

.number-select__flag {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.008em;
  position: relative;
  display: flex;
  align-items: center;
  width: 302px;
  height: 48px;
  border-radius: 5px;
  margin-right: 25px;
  margin-left: 25px;
  outline: 0;
  border: 0;
  box-shadow: none;
  flex: 1;
  padding: 0 1em;
  color: #383839;
  background-image: none;
  cursor: pointer;
  background: #FFFFFF url(../svg/phone-search-arrow.svg) no-repeat 95.4% 51%;
  border: 1px solid #DADADA;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.number-select__item {
  display: flex;
  align-items: center;
  padding: 15px;
}

.number-select__dial-code {
  color: #A0A0A0;
  padding-left: 5px;
  padding-top: 1px;
}

.number-select__country-name {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.008em;
  line-height: 17px;
  color: #383839;
  padding-top: 1px;
}

.number-select__selected-dial-code {
  padding-top: 1px;
  line-height: 17px;
}

.number-select__output {
  display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="number-select__flag" role="combobox" aria-expanded="true" tabindex="0" title="United States: +1">
  <div class="number-select__output">
    <div class="number-select__wraps number-select__us"></div>
    <div class="number-select__selected-dial-code">+1 (United States)</div>
  </div>
</div>
<ul class="number-select__list">
  <li class="number-select__item" data-value="uk">
    <div class="number-select__flag-box">
      <div class="number-select__wraps number-select__uk">
      </div>
    </div>
    <span class="number-select__country-name">United Kingdom</span>
    <span class="number-select__dial-code">+44</span>
  </li>
  <li class="number-select__item" data-value="us">
    <div class="number-select__flag-box">
      <div class="number-select__wraps number-select__us">
      </div>
    </div>
    <span class="number-select__country-name">United States</span>
    <span class="number-select__dial-code">+1</span>
  </li>
  <li class="number-select__item" data-value="ar">
    <div class="number-select__flag-box">
      <div class="number-select__wraps number-select__ar">
      </div>
    </div>
    <span class="number-select__country-name">Argentina</span>
    <span class="number-select__dial-code">+54</span>
  </li>
  <ul>

1 ответ 1

1
   $('.number-select__item').click(function() {  
      let country = $(this).find('.number-select__country-name').text();
      let code = $(this).find('.number-select__dial-code').text();
      $('.number-select__selected-dial-code').text(`${code} (${country})`);
      numberSelect.slideToggle('fast'); 
    });

var numberSelect = $('.number-select__list');
$('.number-select__flag').click(function(list) {  
  numberSelect.slideToggle('fast');  
  list.stopPropagation();
});

$('.number-select__item').click(function() {  
  let country = $(this).find('.number-select__country-name').text();
  let code = $(this).find('.number-select__dial-code').text();
  $('.number-select__selected-dial-code').text(`${code} (${country})`);
  numberSelect.slideToggle('fast'); 
});

$(document).click(function() {
  numberSelect.slideUp('fast');
});
.number-select__list {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.008em;
  position: absolute;
  z-index: 2;
  display: none;
  width: 302px;
  max-height: 250px;
  white-space: nowrap;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  margin-right: 25px;
  margin-left: 25px;
  cursor: pointer;
  border: 1px solid #DADADA;
  box-sizing: border-box;
  border-radius: 5px;
  background: #FFFFFF;
  box-shadow: 0px 3px 40px rgba(0, 0, 0, 0.08);
  margin-top: 5px;
}

.number-select__flag {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.008em;
  position: relative;
  display: flex;
  align-items: center;
  width: 302px;
  height: 48px;
  border-radius: 5px;
  margin-right: 25px;
  margin-left: 25px;
  outline: 0;
  border: 0;
  box-shadow: none;
  flex: 1;
  padding: 0 1em;
  color: #383839;
  background-image: none;
  cursor: pointer;
  background: #FFFFFF url(../svg/phone-search-arrow.svg) no-repeat 95.4% 51%;
  border: 1px solid #DADADA;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.number-select__item {
  display: flex;
  align-items: center;
  padding: 15px;
}

.number-select__dial-code {
  color: #A0A0A0;
  padding-left: 5px;
  padding-top: 1px;
}

.number-select__country-name {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.008em;
  line-height: 17px;
  color: #383839;
  padding-top: 1px;
}

.number-select__selected-dial-code {
  padding-top: 1px;
  line-height: 17px;
}

.number-select__output {
  display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="number-select__flag" role="combobox" aria-expanded="true" tabindex="0" title="United States: +1">
  <div class="number-select__output">
    <div class="number-select__wraps number-select__us"></div>
    <div class="number-select__selected-dial-code">+1 (United States)</div>
  </div>
</div>
<ul class="number-select__list">
  <li class="number-select__item" data-value="uk">
    <div class="number-select__flag-box">
      <div class="number-select__wraps number-select__uk">
      </div>
    </div>
    <span class="number-select__country-name">United Kingdom</span>
    <span class="number-select__dial-code">+44</span>
  </li>
  <li class="number-select__item" data-value="us">
    <div class="number-select__flag-box">
      <div class="number-select__wraps number-select__us">
      </div>
    </div>
    <span class="number-select__country-name">United States</span>
    <span class="number-select__dial-code">+1</span>
  </li>
  <li class="number-select__item" data-value="ar">
    <div class="number-select__flag-box">
      <div class="number-select__wraps number-select__ar">
      </div>
    </div>
    <span class="number-select__country-name">Argentina</span>
    <span class="number-select__dial-code">+54</span>
  </li>
  <ul>

2
  • Спасибо большое. Рабочий вариант. Подскажите пожалуйста как мне флаги вывести в <div class="number-select__wraps number-select__us"></div> где на конце number-select__us (us) название флагов ? в чем ошибка не пойму ? ` let flags = $(this).find('.number-select__wraps .number-select__us').text(); $('.number-select__wraps .number-select__us').text(${flags}); numberSelect.slideToggle('fast'); });`
    – Gucci
    5 мая 2022 в 11:57
  • А флаги в виде svg картинок они вставлены в background-image в блок number-select__us (us меняется в зависимости от флага)
    – Gucci
    5 мая 2022 в 12:03

Ваш ответ

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

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