Select Option

[prophit]

Hello,

Im looking to do a select option for a form that im making for my work. I want it to to show only the items for a certain selection. For example if i select my make to be honda then for the model select i want it to show me only the models for a honda. I think i have to use javascript but im not sure. Any help or direction would be greatfull. Thanks!!!

[Kravvitz]

That's often called "dependent drop-downs".

Keep in mind that some Internet users use a browser that doesn't have JavaScript enabled. (http://www.thecounter.com/stats/2006/September/javas.php)

I suggest you read these:
Graded Browser Support (http://developer.yahoo.com/yui/articles/gbs/gbs.html)
Progressive Enhancement and the Future of Web Design (http://www.webmonkey.com/03/21/index3a.html)
Accessibility is seldom just up to the interface developer (http://www.robertnyman.com/2006/10/10/accessibility-is-seldom-just-up-to-the-interface-developer/)

[Terrorke]

Yep you can use Javascript for this.
On the first selectbox put a onChange to your select.

On this event just fill your second select box by evaluating the value of the first select.

If I have some more time later on I will post some code

[prophit]

that would be awesome. I posted another post in the javascript. I was able to find some help but now im stuck when trying to match up the name values instead of thier number value

[sincilite]

Have a look in to AJAX this will allow you to update you're drop down depending on what you select from the first

[Charles]

Just be aware that JavaScript and especially AJAX tends to not work. You'll be shutting out a good number of users.

[sincilite]

You can still make AJAX accessible allowing people with Javascript to use it but it gives people with it enabled some flexibility.

Does anyone have any stats as to how many people have JS turned off?

[Charles]

You can still make AJAX accessible allowing people with Javascript to use it but it gives people with it enabled some flexibility.

Does anyone have any stats as to how many people have JS turned off?It's a little under one in ten.

Do you have any examples of accessible AJAX?

[_Aerospace_Eng_]

Here are some but I belive its only taken from stats at the w3schools site.

http://www.w3schools.com/browsers/browsers_stats.asp

[prophit]

Well this is for an internal site. All members have javascript enabled. I found a few examples that im trying to get to work but having problems
Heres the javascript (which i already have a post on the javascript section)

var store = new Array();

store[0] = new Array(
'Please Choose A Make' , 'choose a make'
);

store[1] = new Array(
'Civic','Accord',
'Accord','Accord',
);

store[2] = new Array(
'350zx','350zx',
'Altima','Altima'
);

store[3] = new Array(
'Camry','Camry',
'Tundra','Tundra'
);

store[4] = new Array(
'Silverado','Silverado',
'Corvette','Corvette'
);

function init()
{
optionTest = true;
lgth = document.forms[0].second.options.length - 1;
document.forms[0].second.options[lgth] = null;
if (document.forms[0].second.options[lgth]) optionTest = false;
}


function populate()
{

var box = document.forms[0].make;
var number = box.options[box.selectedIndex].value;

var list = store[number];
var box2 = document.forms[0].model;
box2.options.length = 0;
for(i=0;i<list.length;i+=2)
{
box2.options[i/2] = new Option(list[i],list[i+1]);
}
}

And now the HTML

<form action="findout.php" method="post">
<select name="make" id="make" onchange="populate()">
<option value="0">Please Choose
<option value="1">Honda
<option value="2">Nissan
<option value="3">Toyota
<option value="4">Chevy
</select>
<br />

<select name="model">
<option>Please Select A Make</option>
</select><br>

<input type="Submit" value="Send">

</select>
</form>


Now my problem is if you look at the values of the selected items, they are 0-4. Well i would like them to be the make.. chevy nissan..etc..
someone mentioned adding a

var make = box.options[box.selectedIndex].text;

But im not sure where,Anyone have any ideas?