При выборе вырианта в селекте, подставляем к варианту цену, как реализовать?

Question

Всем привет. Выбираю в селекте вариант, в селекте есть data-priceid="3", 1,2,3,4,5, это цены, каждое число относиться к цене, ниже подписал, эта цена выводиться в id result. Выбрали вариант, считался data-priceid="3" и подставилась цена которая выводиться в result.

<div id="catAprice">1000</div>  1
<div id="catBprice">1200</div>  2
<div id="catDprice">1100</div>  3
<div id="catEprice">1300</div>  4
<div id="catCprice">1400</div>  5

Можно было конечно data-priceid="3" не делать, а где value, вывести числа. Но я с value значение, название поля передаю в бд. А если там будут числа, то в бд попадает число.

$('#mySelect').change(function(){
   var $selected = $(this).find(":selected");
  $('#results').html($selected.data("priceid"))
})

.results{
  font-size: 22px;
  color: red;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select name="catts" id="mySelect" class="js-select2" tabindex="-1" aria-hidden="true">
  <option value="0">Выберите</option>
  <option value="А (L - Мототранспортные средства)" data-priceid="1">А (L - Мототранспортные средства)</option>
  <option value="B (M1 - Легковые авто)" data-priceid="2">B (M1 - Легковые авто)</option>
  <option value="B (N1 - Грузовые авто до 3.5 тонн)" data-priceid="3">B (N1 - Грузовые авто до 3.5 тонн)</option>
  <option value="C (N2 - Грузовые авто 3.5 - 12 тонн)" data-priceid="3">C (N2 - Грузовые авто 3.5 - 12 тонн)</option>
  <option value="C (N3 - Грузовые авто свыше 12 тонн)" data-priceid="2">C (N3 - Грузовые авто свыше 12 тонн)</option>
  <option value="D (M2 - Автобусы до 5 тонн)" data-priceid="4">D (M2 - Автобусы до 5 тонн)</option>
  <option value="D (M3 - Автобусы свыше 5 тонн)" data-priceid="1">D (M3 - Автобусы свыше 5 тонн)</option>
  <option value="E (O1 - Прицепы до 0.75 тонн)" data-priceid="3">E (O1 - Прицепы до 0.75 тонн)</option>
  <option value="E (O2 - Прицепы 0.75 - 3.5 тонн)" data-priceid="3">E (O2 - Прицепы 0.75 - 3.5 тонн)</option>
  <option value="E (O3 - Прицепы 3.5 - 12 тонн)" data-priceid="2">E (O3 - Прицепы 3.5 - 12 тонн)</option>
  <option value="E (O4 - Прицепы свыше 12 тонн)" data-priceid="3">E (O4 - Прицепы свыше 12 тонн)</option>
</select>

<div id="catAprice">1000</div>
<div id="catBprice">1200</div>
<div id="catDprice">1100</div>
<div id="catEprice">1300</div>
<div id="catCprice">1400</div>

<br />

<div id="results" class="results">
  
</div>

Answer 1

$('#mySelect').change(function() {
  var $selected = $(this).find(":selected");
  $('#results').html($("#prices div").eq(+$selected.data("priceid") - 1).text());
})

.results {
  font-size: 22px;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select name="catts" id="mySelect" class="js-select2" tabindex="-1" aria-hidden="true">
  <option value="0">Выберите</option>
  <option value="А (L - Мототранспортные средства)" data-priceid="1">А (L - Мототранспортные средства)</option>
  <option value="B (M1 - Легковые авто)" data-priceid="2">B (M1 - Легковые авто)</option>
  <option value="B (N1 - Грузовые авто до 3.5 тонн)" data-priceid="3">B (N1 - Грузовые авто до 3.5 тонн)</option>
  <option value="C (N2 - Грузовые авто 3.5 - 12 тонн)" data-priceid="3">C (N2 - Грузовые авто 3.5 - 12 тонн)</option>
  <option value="C (N3 - Грузовые авто свыше 12 тонн)" data-priceid="2">C (N3 - Грузовые авто свыше 12 тонн)</option>
  <option value="D (M2 - Автобусы до 5 тонн)" data-priceid="4">D (M2 - Автобусы до 5 тонн)</option>
  <option value="D (M3 - Автобусы свыше 5 тонн)" data-priceid="1">D (M3 - Автобусы свыше 5 тонн)</option>
  <option value="E (O1 - Прицепы до 0.75 тонн)" data-priceid="3">E (O1 - Прицепы до 0.75 тонн)</option>
  <option value="E (O2 - Прицепы 0.75 - 3.5 тонн)" data-priceid="3">E (O2 - Прицепы 0.75 - 3.5 тонн)</option>
  <option value="E (O3 - Прицепы 3.5 - 12 тонн)" data-priceid="2">E (O3 - Прицепы 3.5 - 12 тонн)</option>
  <option value="E (O4 - Прицепы свыше 12 тонн)" data-priceid="3">E (O4 - Прицепы свыше 12 тонн)</option>
</select>

<div id="prices">
  <div id="catAprice">1000</div>
  <div id="catBprice">1200</div>
  <div id="catDprice">1100</div>
  <div id="catEprice">1300</div>
  <div id="catCprice">1400</div>
</div>
<br />

<div id="results" class="results">

</div>

БЛОГ НА HUSL

При выборе вырианта в селекте, подставляем к варианту цену, как реализовать?

Ответы (1 шт):