Dynamic Selection Boxes
I would prefer to use only CSS/HTML/Javascript.
They way I am wanting to set this up is to generate a group of dropdown boxes depending on what drop down item they choose form the master list.
For example
<html>
<body>
<form action="">
<select name="cars">
<o开发者_C百科ption value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
now if they pick volvo I want a set of drop downs (with two options) that allow you to Enable or Disable volvo specific features and a separate set for Fiats. How could I do this?
If you mean you dont want to use server side resources, then the only option is to create large lists of data and keep that on the client. For example:
var masterList = [
{ 'Volvo': 'volvo',
'Elements': [
{ 'SomePieceOfData', 'SomeValue' },
{ 'SomePieceOfData2', 'SomeValue2' },
{ 'SomePieceOfData3', 'SomeValue3' },
]},
{ 'Fiat': 'fiat',
'Elements': [
{ 'SomePieceOfData4', 'SomeValue4' },
{ 'SomePieceOfData5', 'SomeValue5' },
{ 'SomePieceOfData6', 'SomeValue5' },
]},
];
That way, you can simply reference your object and query it for details to show in your drop downs.
You could also do something like this using jQuery
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
</head>
<body>
<form action="">
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<div id="model">
</select>
</form>
<script type="text/javascript">
function makeOptions(arr)
{
var options = '<select id="car-model" name="car-model">';
for (x = 0; x < arr.length; x++)
{
options += '<option value="'+arr[x]+'">'+arr[x]+'</option>';
}
options += '</select>';
return options;
}
$(function() {
$('#cars').change(function() {
var volvo = ['this', 'that', 'another'],
saab = ['this', 'that', 'another'],
fiat = ['this', 'that', 'another'],
audi = ['this', 'that', 'another'];
switch ($(this).val())
{
case 'Volvo':
newSelect = makeOptions(volvo);
break;
case 'Saab':
newSelect = makeOptions(saab);
break;
case 'Fiat':
newSelect = makeOptions(fiat);
break;
case 'Audi':
newSelect = makeOptions(audi);
break;
}
$('#model').html(newSelect);
});
});
</script>
</body>
</html>
加载中,请稍侯......
精彩评论