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

how to assign value of dropdownlist from variable

本文关键字：下拉列表 分配 变量      更新时间：2023-09-26

当用户回答问题A（下拉列表）和问题A1（复选框列表）时，我需要他们输入的信息自动出现在问题B（下拉列表）和问题B1（复选框列表）下

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

到目前为止，我有

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

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

任何帮助将不胜感激。

您需要

从下拉列表 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库，这将使您更快地启动和运行。然后，当您的项目完成后，查找跨浏览器事件委派的工作原理。

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

你抱怨第一个问题中设置的 ansers 成为第二个问题的默认问题？

所以这是你的一个例子，我自己不使用原始 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

但是如果你要做Anny Dom的东西，我会使用JavaScript框架（jquery）重新推荐。也更容易获得好的文档....网络上充斥着糟糕的原始JavaScript内容。

编辑--

好的，它不起作用的原因是探测到这条线 var 复选框 = e.srcElement;

此接缝在不同的浏览器中有所不同将其更改为此

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

它适用于火狐，但我不知道IE没有但这是一个很好的理由来使用像 http://wwww.jquery.com 这样的框架到 AWOID 浏览器差异

安妮·韦

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

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

以防万一其他人正在查找此内容。这是我开始工作的代码。感谢您的帮助。

相关文章：