как назначить значение выпадающего списка из переменной - PullRequest
1 голос
/ 18 мая 2011

когда пользователь отвечает на вопрос A (выпадающий список) и вопрос A1 (список флажков), мне нужно, чтобы информация, которую он вводил, автоматически появлялась под вопросами B (раскрывающийся список) и вопрос B1 (список флажков)

Я пытаюсь использовать JavaScriptфункция для этого.

пока у меня есть

var e = document.getElementById("questionA");
var AnswerA = e.options[e.selectedIndex].text;

Я знаю, что это назначит выбор из questionA переменной AnswerA, но я не знаю, как назначить это в раскрывающемся списке questionB.Я также не знаю, как получить выбор из списка флажков (может быть несколько вариантов), чтобы заполнить второй список флажков.

Любая помощь будет оценена.

Ответы [ 3 ]

1 голос
/ 18 мая 2011

так вот что я получил от вашего вопроса

вы хотите, чтобы ansers в первых вопросах стали значениями по умолчанию для вторых вопросов?

, так что это ваш пример, который я не делаюсам используй raw dom, так что это не будет полностью независимым от браузера

    <html>
      <head>
        <script type="text/javascript" charset="utf-8">

          var setup = function() {
            var questionA = document.getElementById("question-a");
            var checkboxesA = document.getElementById("checkboxes-a");
            var questionB = document.getElementById("question-b");
            var checkboxesB = document.getElementById("checkboxes-b");

            questionA.onchange = function() {
              questionB.selectedIndex = questionA.selectedIndex;
            };

            checkboxesA.onchange = function(e) {
              var checkbox = e.srcElement;
              var ele = document.getElementById(checkbox.getAttribute("data-question-id"));
              ele.checked = checkbox.checked;
            };
          };

        </script>
      </head>
      <body onload="setup()">


        <div>

          <div class="first-questions">
            <h2> first question </h2>
            <select id="question-a">
              <option value="0">first</option>
              <option value="0">second</option>
              <option value="0">third</option>
            </select>

            <div id="checkboxes-a">
              <input type="checkbox" data-question-id="something-first" value="first">first</input>
              <input type="checkbox" data-question-id="something-second" value="second">second</input>
              <input type="checkbox" data-question-id="something-third" value="third">third</input>
            </div>
          </div>

          <div class="second-questions">
            <h2> second question </h2>

            <select id="question-b">
              <option value="0">first</option>
              <option value="0">second</option>
              <option value="0">third</option>
            </select>

            <div id="checkboxes-b">
              <input type="checkbox" name="question-b-first" 
                     id="something-first" value="first">first</input>
              <input type="checkbox" name="question-b-second" 
                     id="something-second" value="second">second</input>
              <input type="checkbox" name="question-b-third" 
                     id="something-third" value="third">third</input>
            </div>
          </div>


        </div>

      </body>
    </html>

идея состоит в том, что флажки в вопросе a имеют идентификатор вопросов, о которых идет речь b, но вы также можете найти их по соглашениюили добавьте события вручную для каждого флажка: D

, но если вы собираетесь делать какие-либо вещи, я рекомендую использовать фреймворк javascript ( jquery ), также проще получить хорошую документацию ....сеть полна ужасных необработанных javascript-материалов.

Edit -

ок, причина, по которой он не работает, вероятно, в этой строке var checkbox = e.srcElement;

thisшвы, чтобы отличаться в разных браузерах, изменяют это на

if (e.srcElement) {var checkbox = e.srcElement;} if (e.originalTarget) {var checkbox = e.originalTarget;}

и он работает для Firefox, но я не знаю об этом, то есть у меня его нет, но это хорошая причина использовать фреймворк, такой как http://wwww.jquery.com, для предотвращения различий в браузере

annyway

если вы хотите, чтобы он изменил значения при отправке, вам сначала нужно подписаться на это событие, а затем проверить, не ответили ли на вопросы в вопросах b, после этого код для изменения состояния элементов работает как впример

1 голос
/ 19 мая 2011
var e = document.all("QuestionA").options.selectedIndex;
document.all("QuestionB").options.selectedIndex = e;


var ckBox1 = document.getElementById("checkboxA")
var ckBox2 = document.getElementById("checkboxB")
if (ckBox1.checked == true) 
   {
     ckBox2.checked = true;
   }

На всякий случай, если кто-нибудь еще разыщет это.Это код, который я получил для работы.Спасибо за вашу помощь.

1 голос
/ 18 мая 2011

Вам нужно будет привязать метод onchange из выпадающего списка A. Таким образом, всякий раз, когда это изменяется (т. Е. Если что-то выбрано), вы можете получить значение этого выбора и вставить его в выпадающий список B, выполнив что-то вроде:

var option = document.createElement('option');
option.value = AnswerA; 
option.innerHTML = AnswerA;
document.getElementById('questionB').appendChild(option);

Делегирование событий обычно немного сбивает с толку новых разработчиков javascript, потому что это должно быть сделано немного по-разному для каждого браузера. Я бы посоветовал поискать cross browser event delegation или использовать какую-то библиотеку JavaScript, которая поможет вам быстрее начать работу. Затем, когда ваш проект завершен, посмотрите, как работает кросс-браузерное делегирование событий.

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