依存/级联下拉菜单

新视界

我正在使用级联下拉jquery插件。https://github.com/dnasir/jquery-cascading-dropdown

我有两个下拉菜单。“客户”和“网站”。

根据您选择的客户端,应该适当地减少网站列表,以仅显示所选客户端的网站。我已经设置了两个PHP脚本returnClientList.php和returnSiteList.php,它们成功返回带有标签/值对的json数组。

我的问题是,选择客户端后,我无法减少站点列表。该事件成功触发,但我只得到完整列表。如您所见,代码使用的是getJSON请求,我从手册中知道该请求发送HTTP GET。查看chrome网络面板会发现实际上没有发送GET值。

希望有一些明显的东西,但我是jquery新手,所以感谢您的帮助。

我的代码:

JS

$('#edit-shift').cascadingDropdown({
selectBoxes: [
    {
      selector: '.clients',
      source: function(request, response) {
      $.getJSON('returnClientList.php', request, function(data) {
                  var selectOnlyOption = data.length <= 1;
                  response($.map(data, function(item, index) {
                      return {
                          label: item.label,
                          value: item.value,
                          selected: selectOnlyOption // Select if only option
                      };
                  }));
              });
          }
    },
    {
        selector: '.sites',
        requires: ['.clients'],
        source: function(request, response) {
            $.getJSON('returnSiteList.php', request, function(data) {
                var selectOnlyOption = data.length <= 1;
                response($.map(data, function(item, index) {
                    return {
                        label: item.label,
                        value: item.value,
                        selected: selectOnlyOption // Select if only option
                    };
                }));
            });

        }
    },
    {
        onChange: function(event, value, requiredValues){}
    }
]
});

的PHP

//this script returns a json array for use in jquery autocomplete fields for site     lists...
header('Content-type: application/json');
require("connect.php");

$client_id = $_GET['?'];

 //do the query for sites that are active
$sql =  "SELECT * FROM site WHERE active=1 AND client_id='$client_id' ORDER BY site_name ASC";
$result = mysql_query($sql) or die('Error: ' . mysql_error());

//loop the results and create php array
while($row = mysql_fetch_array($result)){
    $arr[] = array('label' => $row['site_name'], 'value' => $row['id']);
}

echo json_encode($arr);
新视界

最终为此编写了自己的解决方案,并废弃了该插件。享受。

//dynamically returns the sites once the user chooses a client - edit/add shift form
  $('.client-id').change(function () {
    var selectedClient = $(this).val();
    if (selectedClient != null && selectedClient != '') {

        $.getJSON('returnSiteList.php', { id: selectedClient }, 
                    function (Sites) {
                      var siteSelect = $('.site-id');
                      siteSelect.empty();
                      $.each(Sites, function (index, site) {
                      siteSelect.append($('<option/>', {
                      value: site.value,
                      text: site.label
                }));
            });
        });
    }
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

级联下拉菜单

来自分类Dev

级联选择/下拉菜单

来自分类Dev

JavaScript的级联下拉菜单

来自分类Dev

级联选择/下拉菜单

来自分类Dev

刷新级联下拉菜单

来自分类Dev

多个级联下拉菜单

来自分类Dev

Json级联下拉菜单

来自分类Dev

AngularJS级联下拉菜单

来自分类Dev

使用SQL Ajax的级联下拉菜单

来自分类Dev

使用 Javascript 级联下拉菜单

来自分类Dev

如何使用golang的模板实现级联下拉菜单

来自分类Dev

MVC中的空值多选级联下拉菜单

来自分类Dev

使用li和dl与jquery级联下拉菜单

来自分类Dev

Rails jQuery级联下拉菜单重新加载

来自分类Dev

Laravel 4 Jquery Ajax级联下拉菜单

来自分类Dev

使用ajax php和mysql级联下拉菜单

来自分类Dev

淘汰赛三个级联下拉菜单

来自分类Dev

级联下拉菜单干扰自动完成文本框

来自分类Dev

带有部分过滤器值的AngularJS级联下拉菜单。

来自分类Dev

带有编辑器模板Kendo Grid MVC的级联下拉菜单

来自分类Dev

如何在PHP和AJAX中实现级联下拉菜单?

来自分类Dev

在Spring MVC 3.2.x中实现级联下拉菜单的正确方法

来自分类Dev

将状态保留在查询字符串中的级联下拉菜单

来自分类Dev

Knockout.js:如何使依赖级联下拉菜单无条件可见?

来自分类Dev

检测下拉菜单

来自分类Dev

角度的下拉菜单

来自分类Dev

动态下拉菜单

来自分类Dev

JavaScript下拉菜单

来自分类Dev

左侧的下拉菜单