0

我有一个 jQuery 对话框，需要打开并填充来自数据库的数据。对话框中有下拉菜单，当处于“新”模式（不为重新保存而编辑）时会级联。

如何使用数据库中的值加载对话框，同时导致级联发生。

当对话框处于“编辑”模式时，我已经使用对话框的 onfocus 事件进行绑定，但是每次元素获得焦点时都会触发焦点。没有偷偷摸摸地使用编辑模式就无法工作。

我尝试打开对话框并使用 jQuery 设置下拉菜单，这可行，但随后级联确实有效。

对于级联，我在不同的下拉列表中使用 .change。

不确定代码是否会有所帮助，但会发布一些来迭代我正在使用的 jQuery 功能。

问题是：我如何打开一个对话框，使用来自服务器的信息加载下拉菜单并让 .change 功能正常工作？

$('#collectDD').change(function(){
      // first change the item drop down list
      var collection = $('#collectDD').val();

      data = "coll=" + collection + "&action=getItems&func=";
      $('#addCollection').text(collection);

      $.ajax({
            url: "getItemList.php",
            type: "GET",
            cache: false,
            data: data,
            success: function (html) {
               $('#itemDD').empty();
               $("#itemDD").html(html);              
               // now update the function collection dropdown
               data = "coll=" + collection + "&action=getFunction";

            }
        });

集合 DD HTML

 <select id="collectDD" name="collectionDD">
      <option>Select Collection</option>
      <option>Option1</option>
    </select>
4

1 回答 1

1

这与您的标签名称不完全匹配，我对data字符串进行了一些更改，但我认为它符合您正在寻找的内容

<div id="dialogbox">
    <select id="s1"></select>
    <select id="s2"></select>
    <select id="s3"></select>
</div>

<script type="text/javascript">
  $(document).ready( function() {
    $( "#dialogbox" ).dialog({
        open: function(event, ui) {
            var s1 = $("#s1").empty();
            var s2 = $("#s2").empty(); 
            var s3 = $("#s3").empty();

            s1[0].enabled = false;
            s2[0].enabled = false;
            s3[0].enabled = false;

            //load first dropdown from the database
            var data = "coll=dropdown1&val=&action=getItems&func=";
            $.ajax({
                url: "getItemList.php",
                type: "GET",
                cache: false,
                data: data,
                success: function (html) {
                    s1.html(html);
                    s1[0].enabled = true;
                }
            });

            //load the second DD when the first changes
            s1.change( function() {
                s2[0].enabled = false; //disable until after ajax load
                s3[0].enabled = false;

                data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func=";
                $.ajax({
                    url: "getItemList.php",
                    type: "GET",
                    cache: false,
                    data: data,
                    success: function (html) {
                        s2.empty().html(html);
                        s2[0].enabled = true;
                    }
                });
            });

            s2.change( function() {
                if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads
                    s3[0].enabled = false;

                    data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func=";
                    $.ajax({
                        url: "getItemList.php",
                        type: "GET",
                        cache: false,
                        data: data,
                        success: function (html) {
                            s3.empty().html(html);
                            s3[0].enabled = true;
                        }
                    });
                }
            });
        }
    });
  });
</script>

更新

这是一个在自己的函数中具有更改函数的示例

<div id="dialogbox">
    <select id="s1"></select>
    <select id="s2"></select>
    <select id="s3"></select>
</div>

<script type="text/javascript">
    var s1, s2, s3, data;

    $(document).ready( function() {
        s1 = $("#s1").empty();
        s2 = $("#s2").empty(); 
        s3 = $("#s3").empty();

        $( "#dialogbox" ).dialog({
            open: function(event, ui) {
                s1[0].enabled = false;
                s2[0].enabled = false;
                s3[0].enabled = false;

                //load first dropdown from the database
                data = "coll=dropdown1&val=&action=getItems&func=";
                $.ajax({
                    url: "getItemList.php",
                    type: "GET",
                    cache: false,
                    data: data,
                    success: function (html) {
                        s1.html(html);
                        s1[0].enabled = true;
                    }
                });

                //load the second DD when the first changes
                s1.change( changeDD1 );

                //load the third DD when the second changes
                s2.change( changeDD2 );
            }
        });
    });

    function changeDD1() {
        s2[0].enabled = false; //disable until after ajax load
        s3[0].enabled = false;

        data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func=";
        $.ajax({
            url: "getItemList.php",
            type: "GET",
            cache: false,
            data: data,
            success: function (html) {
                s2.empty().html(html);
                s2[0].enabled = true;
            }
        });
    }

    function changeDD2() {
        if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads
            s3[0].enabled = false;

            data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func=";
            $.ajax({
                url: "getItemList.php",
                type: "GET",
                cache: false,
                data: data,
                success: function (html) {
                    s3.empty().html(html);
                    s3[0].enabled = true;
                }
            });
        }
    }
</script>
于 2012-05-28T03:51:42.783 回答