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 に答える