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

Тема в разделе "JavaScript", создана пользователем Dark Wizard, 25 май 2019.

  1. Dark Wizard

    Dark Wizard

    Регистр.:
    23 сен 2007
    Сообщения:
    178
    Симпатии:
    77
    Почему этот код работает в 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 - не помогает.
     
  2. 2cher777

    2cher777

    Регистр.:
    10 мар 2018
    Сообщения:
    282
    Симпатии:
    117
    А через вызов функции пробовал?
     
  3. Dark Wizard

    Dark Wizard

    Регистр.:
    23 сен 2007
    Сообщения:
    178
    Симпатии:
    77
    Вроде ясно:

    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 задавать каждому персонально сразу своё значение?
     
    Последнее редактирование модератором: 26 май 2019
  4. chesterOk2008

    chesterOk2008 Создатель

    Регистр.:
    29 сен 2015
    Сообщения:
    10
    Симпатии:
    4
    как вариант, можно использовать data атрибуты и немного jquery
    пример - http://jsfiddle.net/nf9oz5Lr/2/
     
    Dark Wizard нравится это.
  5. Dark Wizard

    Dark Wizard

    Регистр.:
    23 сен 2007
    Сообщения:
    178
    Симпатии:
    77
    Спасибо! То что нужно! А можно без 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>
    
     
  6. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    523
    Симпатии:
    380
    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>
    https://jsbin.com/movayazuqu/edit?html,js,console,output
     
    Dark Wizard нравится это.
  7. Dark Wizard

    Dark Wizard

    Регистр.:
    23 сен 2007
    Сообщения:
    178
    Симпатии:
    77
    Absolute, спасибо, а можно пример без перебора, а чтобы в конкретный input конкретное свойство data из option вставить. У меня на странице (калькулятор) десятки select/input и перебор не подходит.
     
  8. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    523
    Симпатии:
    380
    Не совсем понял, что вы хотите добиться... В общем без цикла и конкретные свойства:
    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>