如何在javascript中表示2个父子下拉列表

How to represent 2 parent child drop down in javascript?

本文关键字：2个 父子 下拉列表 表示 javascript      更新时间：2023-09-26

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

例如

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

下降#2将是特定制造商的汽车。

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

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

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

根据您的评论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'));
        });
    });
});​

演示。

​

我认为下拉框是指一个选择框。最好的方法是使用静态javascript，但让它执行ajax调用来获取数据。第一个选择框已经填充了html中的数据（当然，可以使用数据库中的数据通过服务器端脚本构建）。在第一个选择盒的更改事件中，您将让ajax调用发送该框的值，并在此基础上让服务器发回第二个选择框的数据。只需使用一点jQuery，您就可以用检索到的数据填充第二个选择框。这是一个安静的案例，所以如果你需要的话，你应该能够在网上找到一些教程…

相关文章：