填充使用JQuery从阵列下拉列表 [英] Populate drop down list from array using JQuery

问题描述

假设我有这样的数组：

Array(
      [0] => Array(
                  [Brand] => 'Toyota',
                  [Model] => 'Camry',
                  [Color] => 'Red',
                  [Year] => 2002
      )
      [1] => Array(
                  [brand] => 'Nissan',
                  [Model] => 'Skyline',
                  [Color] => 'White',
                  [Year] => 2005
      )
      [2] => Array(
                  [Brand] => 'Honda',
                  [Model] => 'Civic',
                  [Color] => 'Green',
                  [Year] => 2000
      ) )

，然后里面的一个下拉列表我有钥匙品牌+型号+颜色+年度

and then inside a drop down list I have the "keys" Brand + Model + Color + Year

问：我怎么能填充另一个下拉列表中使用JQuery（AJAX），与价值观当我点击一个键

Question: how can I populate another drop down list using JQuery(AJAX), with the "values" when I click on one key?

例如：当我点击型号，我想填充另一个下拉列表中的值佳美 + 天际线 + 思域，如果我点击颜色，pupulates是红色 + 白 + 绿色等

Example: When I click on Model, I want to populate another drop down list with the values Camry + Skyline + Civic, and if I click Color, pupulates with Red + White + Green and so on

干杯！

推荐答案

如果您的数组是汽车[] 和您的选择框有sourceBox和targetBox的标识分别是如下code将得到#sourceBox所选项目的文本和填充#targetBox从您的阵列中的所有的等效值。在#sourceBox所以选择颜色将填充#targetBox与红，白，和绿色。

If your array is cars[] and your select boxes have IDs of "sourceBox" and "targetBox" respectively, the following code will get the text of the selected item in #sourceBox and populate #targetBox with all the equivalent values from your array. So selecting "color" in #sourceBox will populate #targetBox with "red", "white", and "green."

    $(document).ready(function(){
       $('#sourceBox').change(function(){
        var options = "";
        for (var i = 0; i < cars.length; i++){
          options += '<option>' 
              + cars[i][$('#sourceBox option:selected').text()] 
              + '</option>';
        }
        $('#targetBox').html(options);
        });
    });

这篇关于填充使用JQuery从阵列下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！