Как получить значение выбранного option, если стоит niceSelect?

Question

[anmkh]

Простым способом не получается отловить значение выбранного select, потому что niceSelect добавляет собственный список, а исходный скрывает

<select name="calc-type" id="calc-type" style="display: none;">
    <option value="200">После ремонта</option>
     option value="500">После пожара</option>
      <option value="300">Уборка</option>
</select>

<div class="nice-select" tabindex="0">
<span class="current">После ремонта</span>
<ul class="list">
  <li data-value="200" class="option selected">После ремонта</li>
  <li data-value="500" class="option">После пожара</li>
  <li data-value="300" class="option">Уборка</li></ul></div>

Answer 1

[Kentavr16]

const selected = document.querySelector('.option.selected'); 
const value = selectedElement.getAttribute('data-value');

Comments

[anmkh]

Событие change не отлавливается

[Kentavr16]

anmkh, пойдем долгим путем ) где код?

[anmkh]

Kentavr16,
Решил так

$(document).on("change", calcForm, function () {
    const typeVal = $("#calc-type").val();
    const viewVal = $("#calc-view").val();
    const area = $("#calc-area").val();
    const step = 100;

    console.log(area)

    var result = (parseInt(typeVal) + parseInt(viewVal)) + (parseInt(area) * parseInt(step));

    $(".calc__total span").text(result)
});

Но естественно изменения показываются после взаимодействия. Если значения в списках стоят уже первые изначально, то для них нужно написать отдельный код?

[Kentavr16]

anmkh, а почему вы обработчик назначили на документ? в вашем случае нужно что-то вроде

$(".select").change(function () {
        const selectedValue = $(this).val();//ну или event используйте,как удобно
      });

[anmkh]

Kentavr16, Не знаю потому что как потом с ними взаимодействовать)
Вот выбрал все селекты и ранж инпут, а потом не могу обработать. (нужно сложить и перемножить все эти значения и записать в переменную

$("#calc-type").change(function () {
    const typeValue = $(this).val(); //ну или event используйте,как удобно
  });

  $("#calc-view").change(function () {
    const viewValue = $(this).val(); //ну или event используйте,как удобно
  });

  $("#calc-area").change(function () {
    const areaValue = $(this).val(); //ну или event используйте,как удобно
  });

[Kentavr16]

anmkh, ага. Теперь понятно. Я бы в вашем случае добавил кнопку, по нажатию на которую происходят арифметики эти.
вот взял с сайта вашей библиотеки пример и дописал небольшую логику

<select>
      <option data-display="Select">Nothing</option>
      <option value="1">Some option</option>
      <option value="2">Another option</option>
      <option value="3" disabled>A disabled option</option>
      <option value="4">Potato</option>
    </select>
    <input class="userData" type="number"></input>
    <p class="display"></p>
    <script>
      $(document).ready(function () {
        $("select").niceSelect();
      });
      
      $("select").change(function () {
  const selectedValue = $(this).val();
  const userData = $(".userData").val();
  const someval = 10;
  let result = selectedValue * (userData * someval);
  $(".display").text(result);
});

    </script>

тут добавил прослушиватель, который при изменении выбранного селекта меняется отображение в документе. простой пример, но по этому принципу можно дальше смотреть. На вопрос ответил, дальше сами