Форум

sovsem-nub · #1 (**permalink**) 04.03.2020, 11:13

Есть такой код

<select class="selectDost" value="sam">
<option price="300" value="dost">Доставка  300 руб.   </option>
<option price="200" value="dostDrTK">Другая ТК             </option>
<option price="100" value="dostPEK">Доставка ТК "ПЭК"  </option>
<option price="0" value="sam">Самовывоз 0 руб.         </option>
</select>

<a href="#" onclick="alert(document.querySelector('.selectDost').value); return false;">price!</a>

при клике на ссылку получаю текущее выбранное value, а как получить price рядом с выбранным value?

рони · #2 (**permalink**) 04.03.2020, 11:30

sovsem-nub
зачем пихать что-то в option, можно создать обьект с данными {dost : 300,...}
но если очень хочется ...

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>
<body>
<select class="selectDost" value="sam">
<option price="300" value="dost">Доставка  300 руб.   </option>
<option price="200" value="dostDrTK">Другая ТК             </option>
<option price="100" value="dostPEK">Доставка ТК "ПЭК"  </option>
<option price="0" value="sam">Самовывоз 0 руб.         </option>
</select>
<script>
var sel = document.querySelector('.selectDost');
var op = sel.options;
function getPrice()
{
   var index = sel.selectedIndex;
   return op[index].getAttribute('price')
}
</script>
<a href="#" onclick="alert(getPrice()); return false;">price!</a>
</body>
</html>

sovsem-nub · #3 (**permalink**) 04.03.2020, 12:19

Спасибо! про .getAttribute('price') не вспомнил...

<select class="selectDost" value="sam">
<option price="300" value="dost">Доставка  300 руб.       </option>
<option price="200" value="dostDrTK">Другая ТК             </option>
<option price="100" value="dostPEK">Доставка ТК "ПЭК"  </option>
<option price="0" value="sam">Самовывоз 0 руб.             </option>
</select>

<a href="#" onclick="alert(document.querySelector('.selectDost').options[document.querySelector('.selectDost').options.selectedIndex].getAttribute('price')); return false;">price!</a>

рони · #4 (**permalink**) 04.03.2020, 12:31

sovsem-nub,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>
<body>
<select class="selectDost" >
<option value="dost">Доставка  300 руб.   </option>
<option value="dostDrTK">Другая ТК             </option>
<option value="dostPEK">Доставка ТК "ПЭК"  </option>
<option value="sam" selected="selected">Самовывоз 0 руб.         </option>
</select>
<script>
var sel = document.querySelector('.selectDost');


function getPrice()
{

   return {dost : 300, dostDrTK : 200, dostPEK : 100, sam : 0}[sel.value]
}
</script>
<a href="#" onclick="alert(getPrice()); return false;">price!</a>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript