Menu
I need to change the contents of dropdown B based on the selection in dropdown A using javascript. There are no db queries involved--I know beforehand what the contents of B should be given the choice in A. I have found some examples using AJAX, but since there is no db query involved that's not necessary. Can anyone point me to some example code for how to do this?
526
You will have to simply execute the script named CreateCascadingDatabase. sql stored in the SQL Folder of the attached sample and it will create the complete database with data. Below is the HTML Markup which contains three ASP.Net DropDownList controls each for Country, State and City.
Learn how to add JavaScript to an HTML Page ready(function () { var list1 = document. getElementById('firstList'); list1. options[0] = new Option('--Select--', ''); list1. options[1] = new Option('Snacks', 'Snacks'); list1.
To add a dropdown list dynamically, you would need to create the HTML <select> element, its label and optionally a <br> tag. In pure JavaScript, you can use the document. createElement() method to programmatically create a dropdown list. Then you can call the Node's appendChild() method or jQuery's .
How to populate one dropdown based on selection in another with JavaScript? To populate one dropdown based on selection in another with JavaScript, we can create our own functions to get the selected value of the first drop down. Then we can populate the options of the 2nd drop down based on the value of the first drop down.
You can easily populate other values based on drop-down list selection without remembering formulas with the Look for a value in list formula of Kutools for Excel. 1. Select a cell for locating the auto-populate value (says cell C10), and then click Kutools > Formulas > Look for a value in list.
In the Data Validation dialog, under the Settings tab, choose List from the Allow list, and type into the Source textbox, $A$5 is the cell you create the first drop down list in. See screenshot: 8. click OK. Now the second drop down list has been created. See screenshots:
When selecting value in the drop down list, you want the corresponding values in range B2:B8 to be automatically populated in a specific cell. For example, when you select Natalia from the drop down, the corresponding score 40 will be populated in E2 as the below screenshot shown. This tutorial provides two methods to help you solve the problem.
function configureDropDownLists(ddl1, ddl2) { var colours = ['Black', 'White', 'Blue']; var shapes = ['Square', 'Circle', 'Triangle']; var names = ['John', 'David', 'Sarah']; switch (ddl1.value) { case 'Colours': ddl2.options.length = 0; for (i = 0; i < colours.length; i++) { createOption(ddl2, colours[i], colours[i]); } break; case 'Shapes': ddl2.options.length = 0; for (i = 0; i < shapes.length; i++) { createOption(ddl2, shapes[i], shapes[i]); } break; case 'Names': ddl2.options.length = 0; for (i = 0; i < names.length; i++) { createOption(ddl2, names[i], names[i]); } break; default: ddl2.options.length = 0; break; } } function createOption(ddl, text, value) { var opt = document.createElement('option'); opt.value = value; opt.text = text; ddl.options.add(opt); }<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))"> <option value=""></option> <option value="Colours">Colours</option> <option value="Shapes">Shapes</option> <option value="Names">Names</option> </select> <select id="ddl2"> </select>Setup mine within a closure and with straight JavaScript, explanation provided in comments
(function() { //setup an object fully of arrays //alternativly it could be something like //{"yes":[{value:sweet, text:Sweet}.....]} //so you could set the label of the option tag something different than the name var bOptions = { "yes": ["sweet", "wohoo", "yay"], "no": ["you suck!", "common son"] }; var A = document.getElementById('A'); var B = document.getElementById('B'); //on change is a good event for this because you are guarenteed the value is different A.onchange = function() { //clear out B B.length = 0; //get the selected value from A var _val = this.options[this.selectedIndex].value; //loop through bOption at the selected value for (var i in bOptions[_val]) { //create option tag var op = document.createElement('option'); //set its value op.value = bOptions[_val][i]; //set the display label op.text = bOptions[_val][i]; //append it to B B.appendChild(op); } }; //fire this to update B on load A.onchange(); })();<select id='A' name='A'> <option value='yes' selected='selected'>yes <option value='no'> no </select> <select id='B' name='B'> </select>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
