PDA

View Full Version : Dynamic Dropdown Help (rabies treatment rule)



mackles
Dec 3rd, 2014, 06:11 PM
I have very little coding experience (aside from internet tutorials and codeacademy.com). I am having a heck of a time getting this dynamic dropdown to function and would really appreciate any pointers or amendments you may have. It is a bit of a brain teaser...

BACKGROUND:
This is a dynamic dropdown for a decision rule for when to give and when not to give treatment for a rabies contamination. I am basing my code off of this fine gentleman's work (Dynamic Dropdown Boxes - Revised (http://www.felgall.com/jstip120.htm))

GOALS/PROBLEMS:

The final, fourth question does not seem to correspond with the selection of the third select. When I select, for example, "animal is available for test", I do not get in the 4th select "Submit". What is going on here?
I would like all the select options to be updated whenever any of the previous select options are changed. For instance, if I am a user and go all the way through to the fourth select, then decide to change my answer to the first select to 'no', the bottom two selects will not change to "please select the option above first". I have to refresh the page any time I want to go back.







<html>
<body>
<form><fieldset><legend>Prophylaxis Decision Rule</legend>
<label for="optone">Did a potential exposure to rabies occur?
<li>Did a mammal bite the patient?</li>
<li>Did a patient's open wound, mucous membrane, or broken skin contact body fluids from a mammal?</li>
<li> Did a patient have direct contact with a bat, such as a bite, that cannot be ruled out? </li>
</label>
<select id="optone" size="1">
<option value=" " selected="selected"> </option>
<option value="0">Yes</option>
<option value="1">No</option>
</select><br/>
<br/><label for="opttwo">Exposure Type </label>
<select id="opttwo" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select><br/> <br/>
<label for="optthree"> Quarantine Status</label>
<select id="optthree" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select><br/> <br/>
<label for="optfour">Quarantine Status Continued </label>
<select id="optfour" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<input type="button" id="go" value="Submit">
</fieldset></form>

<script>
(function() {
var opts = [
// entries for second question, exposure type

[[' ',' ',],
['High-risk wild animal (bat, racoon, skunk, fox, coyote, bobcat, woodchuck)','2'],
['Low-risk wild animal (squirrel, chipmunk, mouse/rat, rabbit/hare)','3'],
['Dog, cat, ferret','4'],
['Small pocket pet (guinea pig, rabbit, gerbil, hamster)','5'],
['Livestock or unknown wild animal', '6']
],
[['Submit','7']],
// entries for third select

[[' ',' '],
['Animal is available to test','8'],
['Animal is NOT available to test','9']],
[['Submit','10']],
[['',''],
['Animal is healthy and available for quarantine','11'],
['Animal is UNAVAILABLE for quarantine','12']],
[['',''],
['Animal is exclusively indoors','13'],
['Animal is NOT exclusively indoors','14']],
[['Submit', '15']], // if livestock or unknown wild animal
// entries for forth select

[['Submit','Result if animal is available to test']], //if HIGH RISK wild animal and animal is available to test
[['Submit','Result if animal is not available to test']], //if aminal is HIGH RISK and not available to test
[['submit', 'no PEP']],//if low risk animal (select #2 will be 'submit')
[['Healthy after 10 day quarantine', 'No PEP'],
['Symptons consistant with rabies', 'Test animal and start PEP. Discontinue if negative test']],//if dog and is healthy and available for quarantine
[['Submit', 'no PEP']], //if small pet is exclusivley indoors
[['Submit', 'Contact health authorities']], //if small pet is NOT exclusively indoors

];

document.getElementById('optone').onchange=
function() {setOptions(document.getElementById('opttwo'), opts,
document.getElementById('optone').options[
document.getElementById('optone').selectedIndex].value);};
document.getElementById('opttwo').onchange=
function() {setOptions(document.getElementById('optthree'), opts,
document.getElementById('opttwo').options[
document.getElementById('opttwo').selectedIndex].value);};
document.getElementById('optthree').onchange=
function() {setOptions(document.getElementById('optfour'), opts,
document.getElementById('optthree').options[
document.getElementById('optthree').selectedIndex].value);};
document.getElementById('go').onclick=
function() {alert(document.getElementById('optfour').options[
document.getElementById('optfour').selectedIndex].value);};

// setOptions function code goes here (unchanged regardless of the number of select lists
setOptions = function(selbox, opts, chosen) {
var selbox, i, ii, grp;
selbox.options.length = 0;
while (selbox.firstChild) selbox.removeChild(selbox.firstChild);
if (chosen == " ") {
selbox.options[selbox.options.length] =
new Option('Please select one of the options above first',' ');
} else {
for (i=0, ii= opts[chosen].length; i < ii; i++) {
if (opts[chosen][i].length > 1) {
selbox.options[selbox.options.length] =
new Option(opts[chosen][i][0],opts[chosen][i][1]);
} else {
grp = document.createElement('optgroup');
grp.label=opts[chosen][i][0];
selbox.appendChild(grp);
}
}
}
}
})();
</script>

</body>
</html>

xelawho
Dec 3rd, 2014, 06:40 PM
1. I can't replicate this problem. Can you outline the choices that you make that lead to the undesired result?

2. This is the classic problem of dependent form fields - what happens if the user fills them out in a non-linear way? The easiest, least repetitive way that I have found around it is to simply have one function that is fired on the onchange of all the selects that loops through them all, checking the selections and adjusting the next select accordingly. You do have to add some extra logic for when the user is filling out the form for the first time and later selects have not been used yet- say do something innocuous like if this.selectedIndex==0 the next select's selectedIndex=0 else fill out the next select according to the selection, thereby resetting all the later selects to their default position

mackles
Dec 4th, 2014, 06:29 PM
1. You are correct. For some reason I also cannot replicate the problem. Crisis averted!

2. I am having a bit of trouble following (this is my first javascript project, please bare with me). If you can, a code example would really help. I am assuming we will be firing this region each time it is activated?



document.getElementById('optone').onchange=
function() {setOptions(document.getElementById('opttwo'), opts,
document.getElementById('optone').options[
document.getElementById('optone').selectedIndex].value);};
document.getElementById('opttwo').onchange=
function() {setOptions(document.getElementById('optthree'), opts,
document.getElementById('opttwo').options[
document.getElementById('opttwo').selectedIndex].value);};
document.getElementById('optthree').onchange=
function() {setOptions(document.getElementById('optfour'), opts,
document.getElementById('optthree').options[
document.getElementById('optthree').selectedIndex].value);};
document.getElementById('go').onclick=
function() {alert(document.getElementById('optfour').options[
document.getElementById('optfour').selectedIndex].value);};