Автоизменение цены при выборе кол-ва не работает, почему?

Question

[Дмитрий Айтекс]

Подскажите пожалуйста, почему при выборе из списка кол-ва, в первом товаре цена меняется, а во втором нет?
В js не разбираюсь, поэтому нашёл такой скрипт:

document.getElementsByName('main-col')[0].addEventListener("change",function() {
      document.getElementsByName('price')[0].value = this.options[this.selectedIndex].value;
});

данные по товарам:

<div class="col-md-10">
		<h4>Упаковка</h4>
			<select name="main-col" class="form-control">
			<option value="0" selected>Выберите кол-во</option>
			<option value="ЦЕНА: 330 рублей" >30 таблеток(на месяц)</option>
			<option value="ЦЕНА: 550 рублей" >60 таблеток(на 2 месяца)</option>
			<option value="ЦЕНА: 850 рублей" >130 таблеток(на 4 месяца)</option>
			</select>
			<input type="text" name="price" class="form-control" value=""> 
	</div>
													
	<div class="col-md-10">
		<h4>Упаковка</h4>
			<select name="main-col" class="form-control">
			<option value="0" selected>Выберите кол-во</option>
			<option value="ЦЕНА: 580 рублей" >30 таблеток(на месяц)</option>
			<option value="ЦЕНА: 750 рублей" >90 таблеток(на 2 месяца)</option>
			</select>
			<input type="text" name="price" class="form-control" value=""> 
	</div>

Comments

[lega]

jsfiddle.net/lega911/5pbL7m7b

Answer 1

[Алексей С.]

дописать ещё две строчки:

document.getElementsByName('main-col')[1].addEventListener("change",function() {
      document.getElementsByName('price')[1].value = this.options[this.selectedIndex].value;
});

для многотоваров заменяем те две строки на это:

for (var i=0; i <document.getElementsByName('main-col').length; i++) {
  (function(i) {
    document.getElementsByName('main-col')[i].addEventListener("change",function() {
      document.getElementsByName('price')[i].value = this.options[this.selectedIndex].value;
});
  }(i));
}

Comments

[Дмитрий Айтекс]

Спасибо, подскажите ещё , если товаров много, то получается необходимо просто менять значения тут - ('main-col')[1] и тут ('price')[1] и делать список таких же сриптов? или можно в один файл всё поместить

[Алексей С.]

как то так:

for (var i=0; i <document.getElementsByName('main-col').length; i++) {
  (function(i) {
    document.getElementsByName('main-col')[i].addEventListener("change",function() {
      document.getElementsByName('price')[i].value = this.options[this.selectedIndex].value;
});
  }(i));
}

[Дмитрий Айтекс]

Огромное Вам спасибо, выручили)

Answer 2

[g_s_e]

Дублируется название элемента select будет работать так:

<div class="col-md-10">
    <h4>Упаковка</h4>
      <select name="main-col1" class="form-control">
      <option value="0" selected>Выберите кол-во</option>
      <option value="ЦЕНА: 330 рублей" >30 таблеток(на месяц)</option>
      <option value="ЦЕНА: 550 рублей" >60 таблеток(на 2 месяца)</option>
      <option value="ЦЕНА: 850 рублей" >130 таблеток(на 4 месяца)</option>
      </select>
      <input type="text" name="price" class="form-control" value=""> 
  </div>
                          
  <div class="col-md-10">
    <h4>Упаковка</h4>
      <select name="main-col2" class="form-control">
      <option value="0" selected>Выберите кол-во</option>
      <option value="ЦЕНА: 580 рублей" >30 таблеток(на месяц)</option>
      <option value="ЦЕНА: 750 рублей" >90 таблеток(на 2 месяца)</option>
      </select>
      <input type="text" name="price" class="form-control" value=""> 
  </div>

document.getElementsByName('main-col1')[0].addEventListener("change",function() {
      document.getElementsByName('price')[0].value = this.options[this.selectedIndex].value;
});


document.getElementsByName('main-col2')[0].addEventListener("change",function() {
      document.getElementsByName('price')[0].value = this.options[this.selectedIndex].value;
});