编辑 -

Question

当用户回答questionA（下拉列表）和questionA1（复选框列表）时，我需要他们输入的信息自动显示在questionB（下拉列表）和questionB1（复选框列表）

我正在尝试使用javascript函数来执行此操作。

到目前为止我已经

了

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

我知道这会将questionA中的选择分配给变量AnswerA，但我不知道如何将其分配给questionB下拉列表。我也不知道如何从复选框列表中选择（可以是多个选项）来填充第二个复选框列表。

任何帮助都将不胜感激。

Answer 1

您需要从下拉列表A绑定到onchange方法。这样，无论何时更改（即，如果选择了某些内容），您都可以获取该选择的值并通过执行以下操作将其弹出到下拉列表B：

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

对于新的javascript开发人员来说，事件委托通常有点混乱，因为每个浏览器需要稍微不同一些。我建议用谷歌搜索cross browser event delegation或者使用某种类型的JavaScript库来提高你的运行速度。然后，当您的项目完成后，查看跨浏览器事件委派的工作方式。

Answer 2

所以这就是我从你的问题中得到的

你想在第一个问题中设置的激光器成为第二个问题的默认值吗？

所以这是你的一个例子我自己不使用原始dom所以这个migth不是完全独立的浏览器

    <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的问题的ID 但你也可以从惯例中找到它们或者为每个复选框手动添加事件：D

但是如果你要做一些dom的东西，我会使用javascript框架（jquery）进行重新调整也更容易获得良好的文档....网络充满了可怕的原始javascript东西。

编辑 -

好吧，它不起作用的原因是探测这条线 var checkbox = e.srcElement;

这种接缝在不同的浏览器中有所不同把它改成这个

if（e.srcElement）{var checkbox = e.srcElement; } if（e.originalTarget）{var checkbox = e.originalTarget; }

它适用于Firefox，但我不知道即没有但这是使用像http://wwww.jquery.com这样的框架的一个很好的理由解密浏览器难题

anny way

如果你想让它改变提交的值您首先需要订阅该事件然后检查如果问题b中的问题没有得到解答之后，用于更改元素状态的代码起作用如例子中所示

Answer 3

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;
   }

以防万一其他人正在考虑这个问题。这是我已经开始工作的代码。谢谢你的帮助。

如何从变量中分配下拉列表的值

3 个答案:

编辑 -