Question

我希望我不会因为我的问题而烦扰你们，因为我对jQuery和JavaScript相对较新，我对此并不了解。

我想制作一个选择下拉菜单。如果用户从选择下拉菜单中选择了一个值，那么会出现一个基于所选值的新选择下拉菜单，例如您选择的汽车车辆（例如），宝马，然后您会看到一个新的下拉菜单，您可以从中选择宝马汽车的型号。

对不起任何语法错误。我是荷兰人。

我希望你能帮助我。正如我所说，我是jQuery和JavaScript的新手，我希望有人能够解释清楚。

Answer 1

首先你的代码有问题，因为checkname可能是未定义的，他不能在那里使用测试功能。

你的两个下拉列表都应该有一个id。

我建议你先检查一下checkname是否未定义，然后再进行下一次验证

$( "#target" ).select(function() {
  // do the call to ajax and popualte the next dropdown
});

有关详细信息，请访问http://jqapi.com/#p=select 您还可以在此处了解有关ajax的更多信息http://www.w3schools.com/ajax/default.asp

类似的帖子How to populate a cascading Dropdown with JQuery

度过美好的一天

Answer 2

下面的代码允许用户选择下拉id =“division”来重新填充下拉id =“branch_no”。请注意方法jQuery.getJSON - 它正在对执行查询并返回JSON数据的PHP页面进行AJAX调用。

$('#division').change(function() { 

    jQuery.getJSON( 'gAjaxJsonBranches.php?division=' + $('#division').val(), null, function(jdata) {

        var jObj = jQuery.parseJSON(jdata);

        var $el = $("#branch_no");
        $el.empty();

        $el.append($("<option></option>").attr("value", '').html('&lt;&lt;SELECT&gt;&gt;'));

        $.each(jObj.searches, function(key, value) {
            $el.append($("<option></option>").attr("value", value['id']).text(value['item']));
        });
    });


 });

gAjaxJsonBranches.php的代码，使用数据库查找：

<?php

$conn = new PDO('mysql:host=yourhost;dbname=yourdb', 'user', 'password');

$search_list = '{ "searches": [ ';

$l_sql = "SELECT b.branch_no, b.branch_name " ;
$l_sql .= "FROM branches b INNER JOIN divisions d ON b.divisions_id = d.id " ; 
$l_sql .= "WHERE d.division = '" . $_GET["division"] . "' " ; 
$l_sql .= "ORDER BY b.divisions_id, b.branch_no ";

foreach ($conn->query($l_sql) as $l_row) {

    if(trim($l_row[1]) != '') {

        $search_list .= '{' ;
        $search_list .= '"id": "' . $l_row[0] . '",' ;
        $search_list .= '"item": "' . $l_row[0] . '-' . $l_row[1] . '"' ;
        $search_list .= '},' ;
    }

}

$search_list = substr($search_list, 0, -1);

$search_list .= '] }';

header('Content-type: text/plain');
echo json_encode($search_list);
exit();

Answer 3

这里是 DEMO

给定一系列值，例如：

var mainDropdownValues = {1: "one", 
                           2: "two",
                           3: "three",
                           4: "four"};

并使用辅助函数，例如：

var assignValuesToDropDown = function( dropdownSelector, valuesArray ){
    var seloption = '';

    $.each( valuesArray, function(index, value){            
         seloption += '<option value="'+ index +'">'+ value +'</option>';
    });

    $(dropdownSelector).append(seloption);        
};

您可以执行此操作以在页面准备就绪时填充第一个下拉列表：

$().ready(function(){
    assignValuesToDropDown( "#mainDropdown", mainDropdownValues );

    // add a listener for when the value change on the main dropdown, to update
    // the second one.
    $('#mainDropdown').on('change', function(){
      // need to get the second set of values from somewhere (see demo for how I did it) 
      assignValuesToDropDown( "#secondaryDropdown", dropDownValues );         });
});

如何根据第一个选择下拉菜单显示选择下拉菜单

3 个答案: