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>

现在如果他们选择沃尔沃我想要一组下拉（有两个选项），允许你启用或禁用沃尔沃特定功能和菲亚特的单独设置。我怎么能这样做？

Answer 1

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

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

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

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 个答案: