Выбрать значение в зависимости от выбранного элемента в выпадающем списке

136

19 ноября 2021, 09:40

<div class="zena"> 
	<div class="param"> 
	  <p class="opisanie">параметр 1</p> 
	</div> 
	<div class="right"> 
	  <p class="price">1000 руб.</p> 
	</div> 
 
	<div class="param"> 
	  <p class="opisanie">параметр 2</p> 
	</div> 
	<div class="right"> 
	  <p>1200 руб.</p> 
	</div> 
</div>

Имеется код показанный выше, можете подсказать (дать ссылок где посмотреть, если имеется возможность показать пример), как сделать выпадающий списком по формату

<список>
<парам_1>Параметр 1</парам_1>
<парам_2>Параметр 2</парам_2>
</список>

и если выбран Параметр 1 то вывести значение 1000 руб., а если выбран Параметр 2, то вывести значение 1200 руб.

Заранее спасибо

добавление из комментариев: правильно ли я понимаю, что данные в option и value надо заполнять вручную?

<div class="block_product"> 
	<div class="zena"> 
		<div class="param"> 
		<p class="opisanie">параметр 1</p> 
		</div> 
		<div class="right"> 
		<p class="price">1000 руб.</p> 
		</div> 
 
		<div class="param"> 
		<p class="opisanie">параметр 2</p> 
		</div> 
		<div class="right"> 
		<p>1200 руб.</p> 
		</div> 
	</div> 
</div> 
 
<div class="block_product"> 
	<div class="zena"> 
		<div class="param"> 
		<p class="opisanie">параметр 1</p> 
		</div> 
		<div class="right"> 
		<p class="price">2940 руб.</p> 
		</div> 
 
		<div class="param"> 
		<p class="opisanie">параметр 2</p> 
		</div> 
		<div class="right"> 
		<p>3040 руб.</p> 
		</div> 
	</div> 
</div>

с помощью вот таких конструкций у меня в переменную передаются данные в форму связи

var price = form.find('p.price').text();

я пытаюсь добавить выпадающий список как писал в письме вопроса. но у каждого блока (товара) свои параметры и цены.

Дополнительное уточнение от 22.11.2019 13:06

function oneClickty(form) { 
	var ht_3 = 
		'<select id="mySelect"></select>'; 
	console.log(ht_3); 
 
	var opisanie = document.getElementsByClassName("opisanie"); 
	console.log(opisanie); 
	var price = document.getElementsByClassName("price"); 
	console.log(price); 
	var select = document.getElementById("mySelect"); 
	for(var i = 0; i < opisanie.length; i++){ 
		console.log(i); 
		var opt = document.createElement("option"); 
		console.log(opt); 
		opt.value = price[i].innerHTML; 
		console.log(opt.value); 
		opt.innerHTML = opisanie[i].innerHTML;  
		console.log(opt.innerHTML); 
		//select.appendChild(opt); 
	}; 
return false; 
}

в логе выдает следующие http://joxi.ru/823oM54f9VWwl2, но если убрать коменты с select.appendChild(opt); выдает сообщение об ошибке: http://joxi.ru/L21oqRlfRP4LDr можете подсказать в чем ошибка?

Дополнительное уточнение от 22.11.2019 15:07

<div class="zena"> 
  <div class="param"> 
    <p class="opisanie">Параметр 1</p> 
  </div> 
  <div class="right"> 
    <p class="price">2940 руб.</p> 
  </div> 
  <div class="param"> 
    <p class="opisanie">Параметр 2</p> 
  </div> 
  <div class="right"> 
    <p class="price">3040 руб.</p> 
  </div> 
</div>

function onety(form) { 
  var opisanie = document.getElementsByClassName("opisanie"); 
  var price = document.getElementsByClassName("price"); 
  var select = document.createElement("select"); 
  for (var i = 0; i < opisanie.length; i++) { 
    var opt = document.createElement("option"); 
    opt.value = price[i].innerHTML; 
    opt.innerHTML = opisanie[i].innerHTML; 
    select.appendChild(opt); 
  }; 
  var drop_list = select.innerHTML; 
 
  var 
    hth = '<select id="mySelect">' + drop_list + '</select>'; 
  hth += '<br />'; 
  hth += '<br />'; 
  hth += '<input class="current_price" readonly value="' + 'значение price от выбранного параметра' + '">'; 
 
  console.log(hth); 
 
  return false; 
}

в логе формируется:

<select id="mySelect"> 
  <option value="2940 руб.">Параметр 1</option> 
  <option value="3040 руб.">Параметр 2</option> 
</select> 
<br /><br /> 
<input class="current_price" readonly value="значение price от выбранного параметра">

Дополнительное уточнение от 26.11.2019 11:30

Wolframm, Добавил еще несколько блоков (для наглядности примера)
(ссылка: https://codepen.io/xoyig/pen/rNNgqNj)
При такой реализации как Вы предложили в выпадающий список попадают данные из всех имеющихся на странице блоков, а не из определенного который выбран.

Также немного переработал свой пример (добавил несколько блоков):
(на примере не реализовывал всплытие блока с модальном окне и кнопку закрытия)
(ссылка: https://codepen.io/xoyig/pen/mddYGoG)
При нажатии на кнопку "Выбрать", берутся данные только из определенного блока где находится кнопка.
Не могу понять как сделать при такой реализации выпадающий список, и выбор значения в зависимости от выбранного параметра.

Answer 1

Ваш HTML (плюс Jquery для событий):

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div class="zena">
    <div class="rbt param">
        <p class="opisanie">Параметр 1</p>
    </div>
    <div class="right">
        <p class="price">2940 руб.</p>
    </div>
    <div class="sbt param">
        <p class="opisanie">Параметр 2</p>
    </div>
    <div class="right">
        <p class="price">3040 руб.</p>
    </div>
  <select id="select"></select>
</div>
<input id="test"></input>
</body>
  <script>
    $(document).ready(function() {
      // тут инициализируем опции селекта
      initializeSelect();
      // тут вешаем событие на изменение селекта
      $('#select').on('change',function(){
        // получаем значение из выбранного селекта
        var optionsValue = this.options[this.selectedIndex].value;
        // добавляем выбранное значение в input
        $('#test').val(optionsValue);
      });
    });
  </script>
</html>

Инициализация селекта:

 function initializeSelect() {
  // проходим по циклу используя количество элементов описания
  for(var i = 0; i < $(".opisanie").length; i++) {
    // создаем элемент списка
    var opt = document.createElement("option");
    // в качестве значения добавляем цену
    opt.value = $(".price")[i].innerHTML;
    // в качестве текста добавляем описание
    opt.text = $(".opisanie")[i].innerHTML; 
    // добавляем опцию к селекту
    $("#select").append(opt);
  }
}

Answer 2

если вам нужен именно выпадающий список то можно воспользоваться элементом select.

Простейший скрипт:

const price = document.getElementById('price') 
price.addEventListener("change", (e) => { 
  document.querySelector(".price_label").textContent = price[price.options.selectedIndex].value 
})

<select name="" id="price"> 
  <option value="1000">1000</option> 
  <option value="2000">2000</option> 
  <option value="3000">3000</option> 
  <option value="4000">4000</option> 
  <option value="5000">5000</option> 
</select> 
<label class="price_label"></label>