动态选择框

Question

我宁愿只使用 CSS/HTML/Javascript。

我想要设置的方式是根据他们从主列表中选择的下拉项目生成一组下拉框。

例如

<html>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

现在，如果他们选择 volvo，我想要一组下拉菜单（有两个选项），允许您启用或禁用 volvo 特定功能，并为 Fiats 单独设置一组。 我怎么能这样做？

Answer 1

如果您的意思是您不想使用服务器端资源，那么唯一的选择是创建大量数据并将其保留在客户端上。 例如：

var masterList = [
    { 'Volvo': 'volvo', 
      'Elements': [
        { 'SomePieceOfData', 'SomeValue' },
        { 'SomePieceOfData2', 'SomeValue2' },
        { 'SomePieceOfData3', 'SomeValue3' },
    ]},
    { 'Fiat': 'fiat', 
      'Elements': [
        { 'SomePieceOfData4', 'SomeValue4' },
        { 'SomePieceOfData5', 'SomeValue5' },
        { 'SomePieceOfData6', 'SomeValue5' },
    ]},
];

这样，您可以简单地引用您的 object 并查询它以获取在下拉列表中显示的详细信息。

Answer 2

您也可以使用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>

动态选择框

问题描述

2 个解决方案

解决方案1
1 2011-08-15 18:30:32

解决方案2
0 2011-08-15 20:31:02

动态选择框

问题描述

2 个解决方案

解决方案1 1 2011-08-15 18:30:32

解决方案2 0 2011-08-15 20:31:02

解决方案1
1 2011-08-15 18:30:32

解决方案2
0 2011-08-15 20:31:02