admin管理员组文章数量:1026989
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.
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.
Share Improve this question edited May 18, 2011 at 14:25 Matt 41.9k30 gold badges111 silver badges149 bronze badges asked May 18, 2011 at 14:19 RyanSRyanS 111 silver badge2 bronze badges 2- Wele to StackOverflow. You can format your code to be a little more readable by indenting each line by 4 spaces (I went ahead and made the edit for you) – Matt Commented May 18, 2011 at 14:26
- Please show the html - preferable before and after – mplungjan Commented May 18, 2011 at 14:30
3 Answers
Reset to default 1You 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.
so this is what i got from your question
you whant the ansers set in the first questions to bee the default of the second questions?
so this is youst an example i dont use the raw dom myself so this migth not be pletly 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 reed 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. 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
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.
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.
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.
Share Improve this question edited May 18, 2011 at 14:25 Matt 41.9k30 gold badges111 silver badges149 bronze badges asked May 18, 2011 at 14:19 RyanSRyanS 111 silver badge2 bronze badges 2- Wele to StackOverflow. You can format your code to be a little more readable by indenting each line by 4 spaces (I went ahead and made the edit for you) – Matt Commented May 18, 2011 at 14:26
- Please show the html - preferable before and after – mplungjan Commented May 18, 2011 at 14:30
3 Answers
Reset to default 1You 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.
so this is what i got from your question
you whant the ansers set in the first questions to bee the default of the second questions?
so this is youst an example i dont use the raw dom myself so this migth not be pletly 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 reed 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. 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
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.
本文标签： javascripthow to assign value of dropdownlist from variableStack Overflow
版权声明：本文标题：javascript - how to assign value of dropdownlist from variable - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745653994a2161487.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论