Смена содержания span при выборе select

Dark Wizard

Dark Wizard

Гуру форума
Регистрация
23 Сен 2007
Сообщения
194
Реакции
80
Почему этот код работает в Mozilla, но не работает в Chrome и Opera?

Код: 
<span id="art">123</span>

<select id="listselect0" name="listselect0" size="1" class="listselect">
<option value="123" onclick="document.getElementById('art').textContent='123';" selected="selected">123</option>
<option value="456" onclick="document.getElementById('art').textContent='456';">456</option>
</select>

P.S. пробовал textContent менять на innerHTML , span на div - не помогает.
 
А через вызов функции пробовал?
 
Вроде ясно:

1. Теги <OPTION> в нормальных браузерах не поддерживают событие onclick.

2. В данном случае рекомендуется обрабатывать событие onchange в теге <SELECT>, используя при этом параметр this.selectedIndex, который содержит индекс выбранного тега <OPTION>, из которого вы можете "вытащить" как видимый пользователю текст
- this.options [this.selectedIndex].text так и value
- this.options [this.selectedIndex].value.

так работает:
Код: 
<div name="art" id="art">123</div>

<select id="listselect0" name="listselect0" size="1" class="listselect" onchange="art.innerHTML=this.options [this.selectedIndex].value;">
<option value="123" selected="selected">123</option>
<option value="456" >456</option>
</select>

правда мне нужно ещё в двух местах менять значения, придётся дополнительные массивы вводить с данными :(

У меня есть 3 места:
Код: 
<span id="art">123</span>
<span id="price">123</span>
<span id="discount">123</span>
как бы мне при выборе конкретного option задавать каждому персонально сразу своё значение?
 
Последнее редактирование модератором:
chesterOk2008 написал(а):
как вариант, можно использовать data атрибуты и немного jquery
пример - Для просмотра ссылки Войди или Зарегистрируйся
Нажмите для раскрытия...

Спасибо! То что нужно! А можно без jquery сделать? Нашёл такой код

Код: 
<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title>dataset</title> </head> <body>   <div id="user" data-id="1234567890"  data-user="Вася Пупкин"  data-date-of-birth="01.04.1990">Пользователь</div>   <script>   var el = document.getElementById('user'); id = el.dataset.id; // Получаем значение атрибута data-id user = el.dataset.user; dob = el.dataset.dateOfBirth; // Получаем значение атрибута data-date-of-birth el.dataset.ban = 'Нет'; // Назначаем новый атрибут data-ban и его значение console.log(user); // Выводим в консоль значение переменной user console.log(dob); // Выводим в консоль значение переменной dob </script> </body> </html>

на простых слоях работает, а вот как к select привязать не разобрался - везде получается undefined.

Я пробовал так:

Код: 
<select id="listselect0" name="listselect0" size="2" class="listselect" onchange="selectproduct();">
<option value="123" id="idart1" data-art="art1" data-price="price1" data-discount="discount1" selected="selected">123</option>
<option value="456" data-art="art2" data-price="price2" data-discount="discount2">456</option>
</select>
art <input type="text" id="art0" /><br>
price <input type="text" id="price0" /><br>
discount <input type="text" id="discount0" /><br>
<script>
function selectproduct(){
  document.getElementById('art0').value=document.getElementById('listselect0').dataset.art;
}
</script>
 
Dark Wizard написал(а):
можно без jquery сделать?
Нажмите для раскрытия...
HTML: 
<select id="listselect0" name="listselect0" size="3" class="listselect" onchange="selectproduct(this);">
<option value="123" id="idart1" data-art="art1" data-price="price1" data-discount="discount1" selected="selected">123</option>
<option value="456" data-art="art2" data-price="price2" data-discount="discount2">456</option>
  <option value="456" data-art="art3" data-price="price3" data-discount="discount3">888</option>
</select>
  <br><br>
<input type="text" id="art" value="0"><br><br>
  <input type="text" id="price" value="1"><br><br>
   <input type="text" id="discount" value="2">

<script>
function selectproduct($this){
  var obj = $this.options[$this.selectedIndex].dataset;
  if(typeof obj == 'object'){
    for(var i in obj){
      var el = document.getElementById(i);
      if(el !== null){
        el.value = obj[i];
      }
    }
  }
}
</script>
Для просмотра ссылки Войди или Зарегистрируйся
 
Для просмотра ссылки Войди или Зарегистрируйся, спасибо, а можно пример без перебора, а чтобы в конкретный input конкретное свойство data из option вставить. У меня на странице (калькулятор) десятки select/input и перебор не подходит.
 
Dark Wizard написал(а):
Для просмотра ссылки Войди или Зарегистрируйся, спасибо, а можно пример без перебора, а чтобы в конкретный input конкретное свойство data из option вставить. У меня на странице (калькулятор) десятки select/input и перебор не подходит.
Нажмите для раскрытия...
Не совсем понял, что вы хотите добиться... В общем без цикла и конкретные свойства:
HTML: 
<select id="my_select">
  <option>Выберите свойство:</option>
  <option data-konkretnoe_svoistvo="бла-бла" data-konkretnyj_input="bla-bla">Бла-бла</option>
    <option data-konkretnoe_svoistvo="хрю-хрю" data-konkretnyj_input="hru-hru">Хрю-хрю</option>
  </select>
  <br><br>
  <input id="bla-bla">
  <br><br>
  <input id="hru-hru">
 
<script>
document.getElementById('my_select').addEventListener('change', function(){
  var obj = this.options[this.selectedIndex].dataset;
  if(!Object.keys(obj).length){
    return;
  }
  document.getElementById(obj.konkretnyj_input).value = obj.konkretnoe_svoistvo;
});
</script>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху