Получить внутренний HTML-код выбранной опции - PullRequest
Новая
       3

Получить внутренний HTML-код выбранной опции

11 голосов
/ 21 февраля 2011

У меня есть что-то вроде этого: 

select = document.getElementById("select");
select.onchange = function(){
  alert(this.value); //returns the selected value
  alert(this.innerHTML); //returns the entire select with all the options
  alert(this.selected.innerHTML); //this is what I want, but doesn't work, of course
};

Как я могу получить innerHTML выбранной опции в чистом js? (без рамок).

Ответы [ 4 ]

36 голосов
/ 21 февраля 2011

Попробуйте: 

alert(this.options[this.selectedIndex].text);

Демо: 

<select onchange="alert(this.options[this.selectedIndex].text)">
  <option>foo
  <option>bar
  <option>foobar
</select>
3 голосов
/ 21 февраля 2011

Это будет работать. 

select = document.getElementById("select");
select.onchange = function(){
    alert(this.value); //returns the selected value
    alert(this.innerHTML); //returns the entire select with all the options
    var options = this.getElementsByTagName("option");
    var optionHTML = options[this.selectedIndex].innerHTML;  
    alert(optionHTML); //this is what I want, but it works now
};
3 голосов
/ 21 февраля 2011

Я не проверял, но это может сработать: 

alert(this.options[this.selectedIndex].innerHTML)
2 голосов
/ 21 февраля 2011

После некоторых исследований создается впечатление, что браузер (в любом случае Chrome) удаляет теги из значений параметров, что делает невозможным получение фактического HTML-кода.Например, для следующего HTML-кода: 

<html>
  <body>
    <select>
      <option><b>test 1</b></option>
      <option><b>test 2</b></option>
    </select>
  </body>
</html>
  • document.getElementsByTagName('select')[0].options[0].text возвращает 'test 1'
  • document.getElementsByTagName('select')[0].options[0].innerHTML возвращает 'test 1'
  • document.getElementsByTagName('select')[0].options[0].firstChild возвращает текстовый узел, содержащий 'test 1'
  • document.getElementsByTagName('select')[0].firstChild.nextSibling возвращает первый опционный узел.Его первым потомком является текстовый узел 'test 1'
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...