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

发布于 2024-11-08 20:38:25 字数 360 浏览 0 评论 0原文

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

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

到目前为止，我知道

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

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

任何帮助将不胜感激。

原文

when a user answers questionA (dropdownlist) and questionA1 (checkbox list) i need the info they have input automatically appear under questionB (dropdownlist) and questionB1(checkbox list)

I am trying to use a javascript function to do this.

so far I have

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

I know this will assign the selection from questionA to the variable AnswerA but I dont know how to assign that to the questionB dropdownlist. I also dont know how to get the selections from the checkbox list(can be mulitple selections) to populate the second checkbox list.

Any help would be appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

玩心态 2024-11-15 20:38:25

您需要从下拉菜单 A 绑定到 onchange 方法。这样，每当发生变化时（即，如果选择了某些内容），您就可以通过执行以下操作来获取该选择的值并将其弹出到下拉菜单 B 中

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

：对于新的 javascript 开发人员来说，通常会有点困惑，因为每个浏览器需要做的事情略有不同。我建议暂时使用谷歌搜索跨浏览器事件委托或使用某种 JavaScript 库，这样可以让您更快地启动和运行。然后，当您的项目完成后，查看跨浏览器事件委托是如何工作的。

You would need to bind to the onchange method from dropdown A. That way, whenever that changes (Ie, if something is selected) then you can grab the value of that selection and pop it into dropdown B by doing something like :

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

Event delegation is a normally a little confusing for newer javascript developers because it needs to be done slightly differently for each browser. I'd suggest googling cross browser event delegation or use some kind of JavaScript library for now that will get you up and running faster. Then when your project is done look up how cross browser event delegation works.

回复收藏 0 原文

可可 2024-11-15 20:38:25

这就是我从你的问题中得到的答案，

你希望第一个问题中设置的答案成为第二个问题的默认答案吗？

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

，但我不知道 ie 没有那个
但这是使用像 http://wwww.jquery.com 这样的框架的一个很好的理由
请避免浏览器以

任何方式

如果您想让浏览器更改提交时的值，进行差异
您首先需要订阅该事件，然后检查
如果问题b中的问题没有得到解答
之后更改元素状态的代码就起作用了
如示例所示

so this is what i got from your question

you whant the ansers set in the first questions to become the default of the second questions?

so this is youst an example i dont use the raw dom myself so this migth not be completly browser independent

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

the idea is that the checkboxes in question a has a the id of the questions in question b
but you can also youst find them from convention or add events manualy to each checkbox :D

but if you are gonna do anny dom stuff i whuld recomed using a javascript framework (jquery)
also easier to get good documentation.... the web is full of awful raw javascript stuff.

Edit --

ok the reason for it not working is probebly this line
var checkbox = e.srcElement;

this seams to differ in diferent browsers
change it to this

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

and it works for firefox to but i dont know about ie dont have that
but this is a good reason to use a framework like http://wwww.jquery.com
to awoid browser diferenses

anny way

if you whant to have it change the values on submit
you first need to subscribe to that event and then check
if the questions in questions b is not answered
after that the code for changing the elements state works
as in the example

回复收藏 0 原文

￡噩梦荏苒 2024-11-15 20:38:25

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

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

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

Just in case anyone else is looking this up. This is the code that I have gotten to work. Thanks for your help.

回复收藏 0 原文

~没有更多了~