javascript - HTML Forms with drop down items, how to remove it from in realtime for the next form? -
i have jsp
page populating 3 different drop down menus.
they populated same. looking javascript
way in realtime if choose 1 dropdown next 1 go dropdown list won't have option in it.
say have 3 selects "select1","select2",and "select3". add onchange event "select1":
<script language="javascript"> function select1_onchange() { var elemselect1 = document.getelementbyid("select1"); var elemselect2 = document.getelementbyid("select2"); var elemselect3 = document.getelementbyid("select3"); var selvalue = elemselect1.options[elemselect1.selectedindex].value; elemselect2.remove(getindexfromvalue(elemselect2,selvalue)); elemselect3.remove(getindexfromvalue(elemselect3, selvalue)); } function select2_onchange() { var elemselect2 = document.getelementbyid("select2"); var elemselect3 = document.getelementbyid("select3"); var selvalue = elemselect2.options[elemselect2.selectedindex].value; elemselect3.remove(getindexfromvalue(elemselect3, selvalue)); } function getindexfromvalue(objselect,strvalue) { var ret; (i = 0; < objselect.options.length; i++) { if (objselect.options[i].value == strvalue) { ret = i; } } return ret; } </script>
tags might like:
<select id="select1" name="select1" size="1" onchange="select1_onchange()> <option value="red">red</option> <option value="green">green</option> <option value="blue">blue</option> <option value="yellow">yellow</option> </select> <select id="select2" name="select2" size="1" onchange="select2_onchange()> <option value="red">red</option> <option value="green">green</option> <option value="blue">blue</option> <option value="yellow">yellow</option> </select> <select id="select3" name="select3" size="1"> <option value="red">red</option> <option value="green">green</option> <option value="blue">blue</option> <option value="yellow">yellow</option> </select>
Comments
Post a Comment