how to assign value of dropdownlist from variable
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 do开发者_运维问答nt 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.
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.
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
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.
加载中,请稍侯......
精彩评论