Выпадающий список выбора HTML с функцией JavaScript - PullRequest
Новая
       14

Выпадающий список выбора HTML с функцией JavaScript

0 голосов
/ 27 декабря 2011

Вот как далеко я добрался: 

<head>
<script type="text/javascript">
function showonlyone(thechosenone) {
    var article = document.getElementsByTagName("div");
    for(var x=0; x<article.length; x++) {
        name = article[x].getAttribute("name");
        if (name == 'article') {
            if (article[x].id == thechosenone) {
                article[x].style.display = 'block';
            }
            else {
                article[x].style.display = 'none';
            }
        }
    }
}
</script>
</head>
<form>
<select>
<option SELECTED>Choose one</option>
<option value="javascript:showonlyone(id1)">First</option> <!-- That's probably wrong -->
<option value="javascript:showonlyone(id2)">Second</option>
</select>
</form>
<div name="article" id="id1" style="display:none;">
First one selected
</div>
<div name="article" id="id2" style="display:none;">
Second one selected
</div>

Вот что он должен делать:

  • Создать выпадающий список (с 3 значениями)

  • Если вы нажмете «Первый», то должно отобразиться только содержимое <div id="id1">

  • Если вы нажмете «Второй», он должен показать только содержимое <div id="id2">

Я знаю, что это не может так работать. Но я не знаю, как я могу заставить это работать. Возможно, есть более простой способ, чем эта функция javascript, но так и должно быть.

Спасибо за вашу помощь

1 Ответ

2 голосов
/ 27 декабря 2011

Вместо этого используйте обработчик события onchange:

  • Обновите <select> до <select onchange="showonlyone(this)">.
  • Измените ваши <option> значения только на идентификаторы, а не на вызовы JavaScript.
  • Обновите ваш JavaScript, чтобы он принимал HTMLSelectElement (который будет передан this выше). (Да, вы были правы здесь.)
  • В выбранном HTMLSelectElement запросите его значение.

Вот исправленная рабочая версия: http://jsfiddle.net/YRF6u/

Также включено сюда: 

<head>
  <script type="text/javascript">
    function showonlyone(selector) {
      var thechosenone = selector.value;
      var article = document.getElementsByTagName("div");
      for(var x=0; x<article.length; x++) {
        name = article[x].getAttribute("name");
        if (name == 'article') {
          if (article[x].id == thechosenone) {
            article[x].style.display = 'block';
          }else{
            article[x].style.display = 'none';
          }
        }
      }
    }
  </script>
</head>
<form>
  <select onchange="showonlyone(this)">
    <option SELECTED>Choose one</option>
    <option value="id1">First</option>
    <option value="id2">Second</option>
  </select>
</form>
<div name="article" id="id1" style="display:none;">
  First one selected
</div>
<div name="article" id="id2" style="display:none;">
  Second one selected
</div>

Я бы не стал рассматривать этот готовый к использованию код, но его должно быть достаточно для решения текущего раунда вопросов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...