November 12, 201312 yr Hi all Got a problem that is probably very simple and would appreciate any help that anyone can offer. I have a normal select field in a form with 2 options, what im trying to do is generate new content (in this case another select field) based on what option the user chooses (but not by clicking a submit button just by selecting a option). Based on my very limited web design knowledge I think ajax will play a part to update the content without a page refresh but im just not sure how to go about it. Any help would be greatly appreciated. Best regards David
November 12, 201312 yr No AJAX needed, or PHP. Just use JavaScript. Something like this... http://jsfiddle.net/andy9l/nB7P6/
November 12, 201312 yr Author Dont suppose theres any chance you may be able to explain the javascript?
November 12, 201312 yr $(function(){ // This is just a jQuery shorthand for: onPage load, do everything inside here... // This adds an onchange event handler to the select element // with the data-role value of 'initial-selector' $("select[data-role='initial-selector']").on('change', function(){ // Gets the selected index of the initial-selector select element // the selected index is an integer value 0 -> number of options-1 var index = this.selectedIndex; // Hide all of the other selects using a simple js-hide class // this line hides all select elements with that class $("select.hide-js").hide(); // Now show the appropriate select element using the index // we got previously – uses the data-role property again // If the index is 1, then this line chooses selector-1 // if the index is 2, then this line chooses selector-2, and so on... $("select[data-role='selector-" + index + "']").show(); }); // onLoad, just hide the select boxes initially – this is better than // CSS as it allows for non-js users to still use the form at least $("select.hide-js").hide(); }); // End of the initial function (jQuery shorthand onPage load) Edited November 12, 201312 yr by andy9l
Create an account or sign in to comment