I need to have a select form element, with the options generated from dynamic content that could come from a database or an array, with an unknown number of options. Then, I need to create two more selects, with all of the options except the ones selected in the previous select. For example, a user must choose their first, second, and third choices for college.
Lets say we have a list of colleges and their abbreviations:
<input type=”checkbox” name=”scholarshipschools” value=”CWU” title=”Please select a college.” /> Central Washington Univ, Ellensburg <br />
<input type=”checkbox” name=”scholarshipschools” value=”EWU” /> Eastern Washington Univ, Cheney <br />
<input type=”checkbox” name=”scholarshipschools” value=”SVC” /> Skagit Valley College <br />
<input type=”checkbox” name=”scholarshipschools” value=”ESC” /> The Evergreen State College, Olympia <br />
<input type=”checkbox” name=”scholarshipschools” value=”UWB” /> Univ of Washington, Bothell <br />
<input type=”checkbox” name=”scholarshipschools” value=”UWS” /> Univ of Washington, Seattle <br />
<input type=”checkbox” name=”scholarshipschools” value=”UWT” /> Univ of Washington, Tacoma <br />
<input type=”checkbox” name=”scholarshipschools” value=”WSU” /> Washington State Univ, Pullman <br />
<input type=”checkbox” name=”scholarshipschools” value=”WWU” /> Western Washington Univ, Bellingham
The checkboxes don’t allow the user to choose what ones would be their first, second and third choices. Also, doesn’t let the user know that they are limited to choosing three. I have been asked to redesign this form so that the user has a better interaction with the page.
I don’t want to type the names of the schools and their abbreviations more than once while I develop this, so the first thing I want to try is to put them into an array, then I can use them when, where and in whatever container I wish. (like changing from checkboxes to selects).
var thecollegeabbr = [“CWU”,”EWU”, “SVC”, “ESC”, “UWB”, “UWS”, “UWT”, “WSU”, “WWU”];
var thecolleges = [“Central Washington Univ, Ellensburg”, “Eastern Washington Univ, Cheney”, “Skagit Valley College”, “The Evergreen State College, Olympia”, “Univ of Washington, Bothell”, “Univ of Washington, Seattle”, “Univ of Washington, Tacoma”, “Washington State Univ, Pullman”, “Western Washington Univ, Bellingham”];
I would like for the college name to have its abbreviation attached to it, rather than have them in two separate arrays. Using the information from my previous post on JavaScript Array Best Practices, I see that I could streamline this a little, and make a more efficient 2-dimensional array. I will use a for-if loop to push the abbreviation and title into a two dimensional array.
var thecollegechoices=[];
// combine the abbreviation and the title into a two dimensional array…
for(i=0;i<thecollegeabbr.length;i++){thecollegechoices.push([thecollegeabbr[i], thecolleges[i]]); }
Now that I have an array of data to populate the selects, I will create an algorithm to put the data into the “First Choice” selector:
// now put the data into a select element
for(i=0;i<thecollegechoices.length;i++){
$(“#firstcollegechoice”).append(“<option value='”+ thecollegechoices[i][0] +”‘>”+ thecollegechoices[i][1] +”</option>”);
} // end for loop to put the data into a select element
The results are very effective, as I now have a select that was dynamically populated using the array of data that I was provided. The next step is where this really starts to get fun. Now I need to create a “Second Choice” selector using all of the choices from the first one, except for the one that was chosen by the user in the “First Choice” selector. This will need an algorithm that is a bit more complex, and will be triggered by the event of the user choosing the first choice.
From my previous article about using JQuery to handle events, I know that I can access the onchange event handler and give it a method that will run my function when the user changes the value of the select. I will build the algorithm into this method as so:
- Get the value of the college that the user has chosen.
- Rebuild my array of “thecollegechoices”, eliminating the option that was previously chosen.
- Populate the options of the “Second Choice” selector using the new data that has been put into thecollegechoices array.
Here is a snippet of what this looks like now…
$( ‘#firstcollegechoice’ ).on(“change”, function(){
var thecollegechoices=[];
for(i=0;i<thecollegeabbr.length;i++){
// check here to see if the choice is used in the first select.
if(thecollegeabbr[i]!=$(“#firstcollegechoice :selected”).val()) {thecollegechoices.push([thecollegeabbr[i], thecolleges[i]]);}
}
for(i=0;i<thecollegechoices.length;i++){$(“#secondcollegechoice”).append(“<option value='”+ thecollegechoices[i][0] +”‘>”+ thecollegechoices[i][1] +”</option>”);}
}); // end first choice change functions
Dang, this is lookin good. I now have a second choice selector with all the options except for the one that was chosen by the user in the first selector.
It seems like an easy path to our goal, a “Third Choice” selector with all of the options except what was chosen in one and two. Then we are left with some ui clean up to ensure a good user experience. I like to use responsive disclosure to guide the user through a form whenever possible. For this instance, I will disable the second and third choice drop-downs until they are needed, so the user will easily see what they need to do.
———————————– here is the dev code ———————————–
<select name=”scholarshipschools” id=”firstcollegechoice” ><option value=””>First Choice</option></select>
<select name=”scholarshipschools” id=”secondcollegechoice” disabled=”disabled”><option value=””>Second Choice</option></select>
<select name=”scholarshipschools” id=”thirdcollegechoice” disabled=”disabled”><option value=””>Third Choice</option></select>
<script>
// make an array to hold the college choices.
var thecollegeabbr = [“CWU”,”EWU”, “SVC”, “ESC”, “UWB”, “UWS”, “UWT”, “WSU”, “WWU”];
var thecolleges = [“Central Washington Univ, Ellensburg”, “Eastern Washington Univ, Cheney”, “Skagit Valley College”, “The Evergreen State College, Olympia”, “Univ of Washington, Bothell”, “Univ of Washington, Seattle”, “Univ of Washington, Tacoma”, “Washington State Univ, Pullman”, “Western Washington Univ, Bellingham”];
var thecollegechoices=[];
// combine the abbreviation and the title into a two dimensional array…
for(i=0;i<thecollegeabbr.length;i++){thecollegechoices.push([thecollegeabbr[i], thecolleges[i]]); }
// now put the data into a select element
for(i=0;i<thecollegechoices.length;i++){$(“#firstcollegechoice”).append(“<option value='”+ thecollegechoices[i][0] +”‘>”+ thecollegechoices[i][1] +”</option>”);}
$( ‘#firstcollegechoice’ ).on(“change”, function(){
//$(“#debugzone”).html($(this).val() + ” chosen now build the second select<br />”);
$(“#secondcollegechoice”).html(“<option value=”>Second Choice</option>”).removeAttr(“disabled”);$(“#thirdcollegechoice”).html(“<option value=”>Third Choice</option>”).attr(“disabled”, “disabled”);
var thecollegechoices=[];
for(i=0;i<thecollegeabbr.length;i++){
// check here to see if the choice is used in the first select.
if(thecollegeabbr[i]!=$(“#firstcollegechoice :selected”).val()){thecollegechoices.push([thecollegeabbr[i], thecolleges[i]]);}
}
for(i=0;i<thecollegechoices.length;i++){$(“#secondcollegechoice”).append(“<option value='”+ thecollegechoices[i][0] +”‘>”+ thecollegechoices[i][1] +”</option>”);}
});
$( ‘#secondcollegechoice’ ).on(“change”, function(){
//$(“#debugzone”).html($(this).val() + ” chosen now build the third select<br />”);
$(“#thirdcollegechoice”).html(“<option value=”>Third Choice</option>”).removeAttr(“disabled”);
var thecollegechoices=[];
for(i=0;i<thecollegeabbr.length;i++){
// check here to see if the choice is used in the first select.
if(thecollegeabbr[i]!=$(“#firstcollegechoice :selected”).val() && thecollegeabbr[i]!=$(“#secondcollegechoice :selected”).val()){
thecollegechoices.push([thecollegeabbr[i], thecolleges[i]]);
}
}
for(i=0;i<thecollegechoices.length;i++){$(“#thirdcollegechoice”).append(“<option value='”+ thecollegechoices[i][0] +”‘>”+ thecollegechoices[i][1] +”</option>”);}
});
</script>
<!– end new content dev area –>