Macchiato Posted November 9, 2012 Share Posted November 9, 2012 For example, if you select the option with id="chocolate-yes" or id="vanilla-yes", the the option with id="icecreamcone-yes" will also be selected.As you can see on the image below, when you select the option with id="chocolate-yes", <select id="icecreamcone"> will be disabled. When both id="chocolate-yes" and id="vanilla-yes" are not selected the the option with id="icecreamcone-no" will not be disabled. To put it in simpler words: you always need to have an ice cream cone if you want to add vanilla or chocolate ice cream, with the exception of sprinkles Anyone know of a Javascript that can do this? Note 1: the option with id="sprinkles-yes" will not effect id="icecreamcone-yes".Note 2: id="icecreamcone-yes" need still be selectable prior to selecting id="vanilla-yes" or id="chocolate-yes".Note 3: id names cannot be changed, nor can you add more properties to the elements.Note 4: cannot use jQuery. <ul id="icecream" style="list-style:none;line-height:30px;"> <li> <select id="icecreamcone"> <option value="addicecreamcone">Would you like an ice cream cone?</option> <option id="icecreamcone-yes" value="yes">Yes</option> <option id="icecreamcone-no" value="no">No thanks</option> </select> </li> <li> <select id="vanilla"> <option value="addvanilla">Would you like to add vanilla ice cream?</option> <option id="vanilla-yes" value="yes">Yes</option> <option id="vanilla-no" value="no">No thanks</option> </select> </li> <li> <select id="chocolate"> <option value="addchocolate">Would you like to add chocolate ice cream?</option> <option id="chocolate-yes" value="yes">Yes</option> <option id="chocolate-no" value="no">No thanks</option> </select> </li> <li> <select id="sprinkles"> <option value="addsprinkles">Would you like to add sprinkles on top?</option> <option id="sprinkles-yes" value="yes">Yes</option> <option id="sprinkles-no" value="no">No thanks</option> </select> </li></ul> Link to comment Share on other sites More sharing options...
Macchiato Posted November 9, 2012 Author Share Posted November 9, 2012 The following script seems to work, but has two problems: - It uses jQuery- It ignores note 2. $( "select" ).change(function() { if ( $( "#vanilla" ).val() == "yes" || $( "#chocolate" ).val() == "yes" ) $( "#icecreamcone" ).val( "yes" ); else $( "#icecreamcone" ).val( "addicecreamcone" );}); Link to comment Share on other sites More sharing options...
justsomeguy Posted November 9, 2012 Share Posted November 9, 2012 It basically just comes down to putting change handlers on your dropdowns, and writing some Javascript event handlers to check what they selected and respond appropriately according to your rules. You would put an onchange handler on each select element: http://www.w3schools.com/jsref/event_onchange.asp and have the event handler check all of the options for all of the fields and either select the appropriate options in the other fields or enable and disable the various fields. Link to comment Share on other sites More sharing options...
Macchiato Posted November 15, 2012 Author Share Posted November 15, 2012 With some help I managed to get the following script: <script type="text/javascript">function observeFlavor(flavor, requires) { document.getElementById(flavor).onchange = function(){ if(document.getElementById(flavor).options[1].selected == true) { document.getElementById(requires).options[1].selected = true } }} observeFlavor("chocolate","icecreamcone");observeFlavor("vanilla","icecreamcone");</script> However, the above script doesn't disable the field. Maybe instead of disabling the field you make it unclickable when vanilla or chocolate, or both are selected. But when they are both deselected, the cone will be clickable again. Anyone know how to do this with the script above? Please show me an example if you do. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 15, 2012 Share Posted November 15, 2012 I'm not sure exactly what you want to do, but elements have a "disabled" property that you can set to true or false to disable the field. Link to comment Share on other sites More sharing options...
Macchiato Posted November 16, 2012 Author Share Posted November 16, 2012 I'm not sure exactly what you want to do, but elements have a "disabled" property that you can set to true or false to disable the field. Instead of using the "disabled" property, I want to use an other method to make Select unclickable. The problem with the "disabled" property is that the form field result will not be send to the server. I found a solution to this problem, by turning "disabled" off when you click the submit button: <script type="text/javascript">function observeFlavor(flavor, requires) { document.getElementById(flavor).onchange = function(){ if(document.getElementById(flavor).options[1].selected == true) { document.getElementById(requires).options[1].selected = true; document.getElementById(requires).disabled = true; } else{ document.getElementById(requires).disabled = false; } }}document.getElementById("your-submit-button").onclick = function () { document.getElementById("icecreamcone").disabled = false;}observeFlavor("chocolate","icecreamcone");observeFlavor("vanilla","icecreamcone");</script> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now