Question

我有2个下拉列表，当用户选择下拉列表＃1时，我需要使用与下拉列表＃1选择相关的选项更新下拉列表＃2。

e.g。

Dropdown＃1有汽车制造商：福特，丰田，本田

Dropdown＃2将是该特定制造商的汽车。

我应该如何在javascript中存储这些数据？

我希望我可以创建一个类似字典或哈希的集合，这样我就可以轻松填充每个下拉列表。

我有来自数据库的实际数据，然后在服务器端我将创建我需要创建此数据结构的JavaScript。

Answer 1

来自你的评论 I don't want to make an ajax call, I want to store all the data client side in a javascript object, I am asking how to structure that data

所以只是一个想法

<强> HTML

<select id="cars_company">
    <option value="ford">Ford</option>
    <option value="toyota">Toyota</option>
</select>

<select id="cars">
    <option value="ford_car_one">Ford Car One</option>
    <option value="ford_car_two">Ford Car Two</option>
</select>

<强> JS

$(function(){
    cars={
        ford:{
            ford_car_one:'Ford Car One',
            ford_car_two:'Ford Car Two'
        },
        toyota:{
            toyota_car_one:'Toyota Car One',
            toyota_car_two:'Toyota Car Two'
        }
    };

    $('#cars_company').on('change', function(){
        $('#cars').html('');
        $.each(cars[$(this).val()], function(k, v){
            $('<option></option>').val(k).text(v).appendTo($('#cars'));
        });
    });
});

DEMO

Answer 2

通过下拉列表，我想你的意思是一个选择框。最好的方法是使用静态javascript，但让它执行ajax调用来获取数据。第一个选择框已经填充了html中的数据（可以使用数据库构建数据库来构建服务器端脚本）在第一个选择框的更改事件中，您将使用ajax调用发送值该框的基础上，你有服务器发送回第二个选择框的数据。与一点点jQuery相比，你可以使用检索到的数据填充第二个选择框。这是一个安静的公共案例，所以如果你需要，你应该能够在网上找到一些东西......

如何在javascript中表示2个父级子项下拉？

2 个答案: