-2

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

例如

Dropdown#1 有汽车制造商：福特、丰田、本田

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

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

我希望我可以创建一个像某种字典或散列这样的集合，这样我就可以轻松地填充每个下拉列表。

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

4

2 回答 2

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'));
        });
    });
});​

演示。

​</p>

于 2012-08-23T19:53:19.397 回答
0

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

于 2012-08-23T19:24:34.423 回答