Jump to content
Forums are read-only ×
Larry Ullman's Book Forums

Multi Value Select

Paul_Blackpool
 Share

Recommended Posts

Paul_Blackpool Newbie

Paul_Blackpool

Posted
Posted

I have created a couple of combo boxes using javascript. Is it possible to code the script so in the second combo box the user can click on a checkbox and select more than one option.

 

If the visitor selects a value in the 1st combo box ie

 

"Transport and Logistics"

 

The values in the second combo box are

 

HGV Driver

FLT Driver

Traffic Clerk

Transport Manager

ADR

MOFFAT

 

I thought it may have been as below but that doesnt work, or am I using the wrong script.

 

<

 

script type="text/javascript">

function

 

fillSecondCombo()

{

 

var combo1 = document.getElementById('Combobox1');

 

var combo2 = document.getElementById('Combobox2');

 

var selected = combo1.options[combo1.options.selectedIndex].value;

 

if (selected == 1)

{

combo2.options.length = 3;

combo2.options[0] =

new Option("Item 1", "HGV Driver");

combo2.options[1] =

new Option("Item 2", "FLT Driver");

combo2.options[2] =

new Option("Item 3", "Traffic Clerk");

combo2.options[3] =

new Option("Item 4", "Transport Manager");

combo2.options[4] =

new Option("Item 5", "ADR");

combo2.options[5] =

new Option("Item 6", "MOFFAT");

}

 

else

{

combo2.options.length = 0;

}

}

</

 

script>

</

 

head>

<

 

body>

<

 

select name="Combobox1"="1" id="Combobox1" onchange="fillSecondCombo();return false;" style="position:absolute;left:110px;top:118px;width:167px;height:22px;z-index:0;">

<

 

option selected value="0">Please select an option</option>

<

 

option value="1">Transport and Logistics</option>

<

 

select>

<

 

select name="Combobox2" input type=checkbox;combo2.options.length = 3; size size="1" id="Combobox2" style="position:absolute;left:287px;top:118px;width:128px;height:22px;z-index:1;">

</

 

select>

</

 

body>

</

 

html>

Link to comment
Share on other sites
HartleySan Newbie

HartleySan

Posted
Posted

Paul, I think we first need to clarify what you want. It seems like you're asking for 10 different (and contradictory) things at once. Let's first go over some of the basics.

 

In general, if you want to allow the user to select multiple options, then check boxes (not drop-down lists) are preferable. With that said, you can create a special type of select element in which multiple items can be selected by adding the size and multiple attributes to the opening select tag, as outlined on the following page:

 

http://www.tizag.com/htmlT/htmlselect.php

 

I personally don't like this type of select element though, as it feels antiquated, is quite uncommon, and you have to hold down the Ctrl (or Shift) key to select multiple elements, which most users are not familiar with.

 

With all that said though, I have a feeling that that's not what you were actually asking about. What I think your real question was is how do you code a drop-down list using Javascript so that the moment an item is selected, another drop-down list is instantly generated with the proper items in it. Was that your question?

 

Judging by your code (which is honestly a big ol' mess (sorry if I'm being too harsh!)), I think that's what you were trying to ask about. Below is some code to better demonstrate what I think you're trying to do. Feel free to ask me about anything you don't understand.

 

<!DOCTYPE html>

<html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>JS-generated drop-down lists</title>

 </head>

 <body>

   <select id="first_dd">

     <option value="0">Breakfast</option>

     <option value="1">Lunch</option>

     <option value="2">Dinner</option>

   </select>

   <div id="second_dd_div"></div>

   <script>

     var first_dd = document.getElementById('first_dd');
     var second_dd_div = document.getElementById('second_dd_div');
     var food = [['Cereal', 'Banana', 'Orange Juice'], ['Hamburger', 'Pizza', 'Tea'], ['Steak', 'Spaghetti', 'Wine']];

     first_dd.onchange = getFood;

     function getFood() {

       var val = this.value;

       var html_str = '<select>';

       for (var i = 0, len = food[val].length; i < len; i++) {

         html_str += '<option>' + food[val][i] + '</option>';

       }

       html_str += '</select>';

       second_dd_div.innerHTML = html_str;

     }

   </script>

 </body>

</html>

 

Just a quick breakdown of the code:

1) A select element is written in the HTML. This is the first drop-down list.

2) A div is placed below the select element to hold the other drop-down list.

3) JS variables are assigned the proper DOM references for the select element and the div that will hold the second drop-down list.

4) A 2D array of food info is declared in JS.

5) The getFood function is set to be called whenever the item selected in the first drop-down list is changed (i.e., the onchange event handler).

6) In the getFood function, the variable val is set to the value of the selected item in the select element.

7) The HTML string to be placed within the div is started.

8) A for loop is run to generate all the necessary option elements within the second select element. Note that the notation food[val] is used to access the proper elements in the food array for populating the second drop-down.

9) The end select tag is added to the HTML, and then all that HTML is dumped into the div using the innerHTML property.

10) Done!

 

As a final note, since this post is mainly related to JS, it should have probably have gone on the JS board, not this one. Also, there are lots of things I could have done to make the code more proper, but I wanted to boil it down to the essentials.

Anyway, hope that helps.

Link to comment
Share on other sites
Paul_Blackpool Newbie

Paul_Blackpool

Posted
  • Author
Posted

Thanks hartleySan

 

Thats partley what I needed however I need the second dropdown lost to be multi select.

 

ie as per your example:

 

Breakfast is in the dropdown list so if a user selects "Breakfast" the second box would contain the options

 

Bacon

Eggs

Tomatos

Mushrooms.

 

So the user would select "Breakfast" from the first drop down box.

 

and then be able to select from the second box

 

 

x Bacon

Eggs

Tomatos

x Mushrooms

 

 

 

 

 

 

 

 

 

I know this could be done by the user holding down the ctrl key but I wanted to have selection boxes at the side ie

Link to comment
Share on other sites
HartleySan Newbie

HartleySan

Posted
Posted

What do you mean by the following?

 

I know this could be done by the user holding down the ctrl key but I wanted to have selection boxes at the side ie

 

Is that the end of your post? Do you want to use check boxes instead of a drop-down? Please clearly explain what you want.

Also, at this point, using the code I provided as a base, you should have no problem modifying it for your needs.

Link to comment
Share on other sites
HartleySan Newbie

HartleySan

Posted
Posted

Then do that. Instead of writing the HTML for a select element with option elements in the getFood function, write the HTML for generating check boxes. The general HTML for a checkbox is the following:

 

<input type="checkbox" id="someID" name="someName" value="someValue"> Displayed text

 

That should get you there.

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...