Javascript Form Select Change Options Tutorial Dynamic List Elements HTML5

in this JavaScript video lesson you will learn how to program dynamic select form list elements to demonstrate the logic we will show how to change options of a select list based on the selection the user makes from the first list a web application developer will definitely need to know how to do this when they get into foreign programming that involves data intake of categories and sub-categories from a user so dynamically populating lists - according to the selection made from list one is probably the smartest way to go about that before we begin the lesson let's go over what you will be learning that way you guys can assess whether or not you want to watch the video because you might already know how to do all of these things so the first thing is you will work with an array and a corresponding loop which will slim down your code and produce a great deal of logic in just a few lines of code you'll also learn how to delimit and split strings to further compartmentalize your data handling which Slim's down your code even more and the last bit of logic that this lesson will cover is demonstrating how to dynamically render HTML option elements into a select drop-down list on the page within your smart little loop before we begin actual scripting let's take a look at the finished product the little application that you'll have after following this video lesson so I made it a little choose your car application because I thought that would drive the logic home the best now what happens is in the first list you have three items you can have as many items that you want in there but what's going to happen is when I choose one of these items it's going to dynamically render an option list in this second select element here so this first select element really powers what's going to be put into the second element so let's go ahead and choose Chevy and you'll see what I mean now if you open choose car model then you have Camaro Corvette or Impala that you can choose by change this to Dodge I'll have a whole different list you see now I can choose the challenger charger or Avenger and the same with Ford and like I said you can have as many items as you need in this first list which can then populate as many items as needed within the sec list okay that's the application so you'll know you'll be getting you'll know what you'll be learning so let's rock and roll and we're going to start with the bare bones of an html5 web document you can see we have our script element in place in the head tag and our body element has nothing in it yet so that's where we're going to start in the body element constructing the HTML of the application will type in choose your car we'll wrap that and then h2 heading the next thing we'll do is an HR element which is a horizontal rule just puts a line going across the page now we'll type in choose car make the next line down we'll open a select element and this will be the first drop-down list we'll go down a couple of lines and close that select element now let's give this an ID that's equal to SL ct1 short for select one let's also give it a name attribute of the same name and the name will be in your form processing for instance in PHP we'll scoop up this variable name the ID we're putting in place really just for the JavaScript referencing so we can talk to this element through JavaScript this name attribute is going to be for your form processing now within the Select element we're going to need some option elements and that's what's going to actually populate the list so we'll open an option tag we say value is going to be equal to nothing in this first one and then we can just close that option if you want to have a label for that option you can put a default label there but you want to leave the value empty just for that first one now you can copy that ctrl C go down one line ctrl V and then the value of this one we're going to type Chevy copy that and put it right there so your label is Chevy and the value is also Chevy now let's make two more of those and this one was Dodge this one was Ford you can just copy that paste it there copy that paste it there now let's just copy that select element let's go down one line let's put in another horizontal rule and go down one more line and type in choose car model and then on the next line let's paste in let's select element that we copied now we're going to change this select two and this to select two so this element will be communicated to within the JavaScript using this ID and in your form processing you can scoop up this name now in this one you want no options by default you can just take this and put that select element just like that there's nothing within it it opens and closes with nothing in it so to make this select element one populate the options within select element two we need an on change event and there's several different events that you can listen for but I'm just going to use the on change because I think it makes the most sense here so any time the user changes the value within that first list we're going to populate the second list by firing off a JavaScript function called populate open closed parenthesis and we're going to feed it two arguments the two arguments that we need to send it are the IDs for this select one and the ID for the select two so let's go ahead and pass those through but the first one you can just say this dot ID you can use the this reference because you are in that element so it's going to send that ID select one or you can just type in select one within single quotes then you put a comma and the next argument is going to be the ID of this element between single quotes so like I said if you wanted to you could it could read like this select one comma and then select to both of those within single quotes but all you want to do is pass the ID as an argument for this element that you're within you can save this ID with no single quotes so that passes this ID and this ID to the function called populate that we're going to write in the JavaScript element up here now in the HTML let's just put one more line so things look okay under that second select element and that's everything that we need within the HTML so the first line of the JavaScript we're going to create that function called populate so you just type in function populate open closed parenthesis open the curly bracket go down close the curly bracket so you have your nice function nest all set up now remember this populate function is two parameters the IDS of both of those elements so let's scoop those up right here by typing in s 1 comma S 2 now s 1 and s 2 are nice small little variables that will represent these two select elements on the page select 1 and select 2 so within your populate function these little variables represent those elements on the page ok now the first two lines within that function we're going to put the elements into an object that way we can more easily work with them and within our code we don't have to keep saying document dot get element by ID so now we have VAR s 1 and VAR s 2 which are actual objects which represent these select elements here on the page here we're just sending the string that represents the ID of the of the Select element alright now let's talk to the s 2 object first thing and we're going to say s 2 dot innerhtml is equal to nothing so every time the function populate runs the inner HTML of this select list is going to be made nothing again because a new list is about to be packed into it so really first thing in that function you want to clear out whatever's in it already now all we have to do is evaluate with a few if conditions and then run a for loop over an array that's going to be assembled within those conditions so I'll show you what I mean let's type in if open close parentheses open curly brace go down a couple of lines close the curly brace and there's your if condition nest all set up and ready to go now the first condition is going to be if the s-1 list on the page dot value is equal to Chevy then we can populate the array correctly here just for Chevy so let's say bar option array is equal to square bracket open and square bracket close and then semicolon now within the square brackets is where we're going to populate all the little list elements or really the values that are going to be used to populate the list all of the options within it now the first thing we want in there is a blank option and you can choose not to have a blank option at first but I'm going to have a link one if you don't want the blank one first just don't put this element in your array so now let me put the next element into the array and it'll make a little more sense for you I'm going to type in Camaro and then the pipe symbol and then again Camaro but this time it's going to be uppercase so for each value for each item within this option array when we run the little loop each one of these items are going to make an option element you see how these option elements are down here each one has a value and a label this is the value and this is the label that we're going to put in so we're going to use this string as the value this string is the label so now let's put it in Corvette through comma double quote double quote in between double quotes you put the pipe on the left side of the pipe you put the value what's going to be sent through the form processing and then you put the label what the user is going to see to select within that list and then the last one is comma double quote double quote Impala so you type in Impala lowercase the pipe symbol and then Impala uppercase and you can put as many as those as you need in there separated by comma now before we put the condition in for Ford and Dodge I want to show you the for loop and show you how all the logic is going to work and then we can put in the other two conditions that will represent Ford and Dodge you so let's open up a four loop open closed parenthesis open a curly brace go down a couple of lines and close your curly brace and that gives you your for loop nest right there now the for loop we have to create a variable of option and this can really be named anything you want so the variable is option in the option array so really what that means for all of the options within the options array this loop is going to run once for each one of those options so for instance this one has four items within the option array that means this loop is going to run four times and each time it runs as it passes through you can access each one of these items here each one of these four items you can access them within this array as they pass through it using this option variable so knowing that we can pop in the five lines that are going to make the magic happen and let me explain those to you now the first line is we create a variable called pair and that represents the option array whichever option is coming through the loop dot split so we run the split method and we use the pipe as a delimiter so what that does is it gives you another little array with two items in it so for instance if Camaro is passing through the loop what's going to happen is this variable called pair is going to be a little array that has two items in it this and this because we split it by the pipe we split that string by the pipe this way we can use this as the value of the option and then we can use this as the label what the user sees because there's many times where you don't the label and the value can't be exactly the same string so that's how you set it up like that you can use the pipe to put both in as you need them then as each one passes through the loop you can use pair zero and then pair one to access this one and this one so for instance pair zero when you reference the array in this sort of way pair zero gives you the first item pair one gives you the second item so that's how that works and that's why we're setting up a variable called pair which actually splits this string okay now the next line here is var new option and this represents document create element method and the element that we want to create using the create element method is an option element you can create new dibs you can create new paragraphs if I was to just put P there that would create a new paragraph or if I put div that would create a new div but we want new option elements placed into this little select two down here in the HTML so we're going to create new options one for each element within the array as it passes through and we can reference that new option object and its value property and make it equal to the first side of the pair basically the lower case word on each one of these items as they pass through now the innerhtml which represents this label for each option element is populated with this part of the string the uppercase and then finally we represent which is this little select two element down on the page and we say dot options add new option so you see the new option is created here it's given its value and it's given its label and then we actually pop it right into the s2 element to select element down here called select - now what's going to happen when we run this right now you can run this in the browser right now and test just press ctrl s to save it and then run it in your favorite browser all right now what's going to happen is if I choose Dodge and Ford nothing will happen because there's no condition set that goes yet but if I choose Chevy you see I get Chevy's list now let me choose Dodge nothing happens because we haven't put that condition in yet let me show you how easy that is now you see where we have in our script if s1 value is equal to chevy bar option array equals this particular array we're just going to copy that if condition and then type in else right here and then paste in that if condition that we just copied else if s1 dot value equals Dodge and then do it one more time else space paste the last condition is else if s1 dot value is equal to Ford now all you have to do is simply change up these arrays to have different cars in them for Dodge right here so let's change this to Avenger and then you would have Avenger right here in capital and then these two are Challenger and charger now let's simply change the option array to reflect Ford cars here so there's your Fords all in place now if you run this you'll have your little application all ready to go let me choose Dodge I get all the Dodge cars Avenger challenger and charger I choose Chevy the list changes give me all the Chevy cars and then if I choose Ford there's the two Ford models that are in place so you see how that works ok so there you go it is an in-depth explanation of how to use one select element to populate another on the page dynamically and this listener is key this on change because that is this actual moment when I choose dodge on change BAM our function fired off called populate okay so we hope you enjoyed this lesson using javascript and HTML on how to program dynamics select form elements and changing the lists

Channel: Adam Khoury

Views: 322,379

Keywords: Javascript, HTML5, form, tutorial, select, option, list, element, change, first, second, other, drop, down, populate, another, when, user, choose, choice, dynamic, howto, make, create, html, css, javascript, JavaScript, help, guide, reference, script, program, programming, school, teacher, learn, online, education, educational, lesson, Lessons, Free, Tips, Beginner, Advanced, free, flashbuilding

Id: UliJeDbc4cw

Length: 16min 7sec (967 seconds)

Published: Sat Sep 08 2012