0

私はjQueryMobileを使用して、データベースに保存されている情報から一連のリストビューを作成しています。各リストビューは、親子関係で次のリストビューを作成します（例：最初のリストビューでは動物を選択でき、犬を選択し、次のリストを選択できます）ビューには血統などが表示されます）。

現在、私のコードはリストビューに適切にデータを入力します。問題は、親リストビューに戻って別の選択を行うと、子リストビューが更新されず、大量の情報が追加されることです。私はどこでもたくさん読んだことがありますが、私のコードの適切な実装を見つけることができないようです。

<ul data-role="listview" data-filter="false" data-inset="true" data-theme="a" data-divider-theme="a">
    <li>
        <label for="pet" class="select">Pet</label>
        <select id="pet" data-mini="true" onchange="fill_list('pedigree', this);">
            <option value=""></option>
        </select>
    </li>
    <li>
        <label for="pedigree" class="select">Pedigree</label>
        <select id="pedigree" data-mini="true" onchange="fill_list('pet_name', this);">
            <option value=""></option>
        </select>
    </li>
    <li>
        <label for="pet_name" class="select">Pet Name</label>
        <select id="pet_name" data-mini="true">
            <option value=""></option>
        </select>
    </li>
</ul>

function fill_list(next_list, this_list){
    var pet_url = server_root_url + 'controler/pet/find_pet.php';
    var value = this_list.options[this_list.selectedIndex].value;

    var params = {
        control: next_list,
        value: value
    };

    $.ajax({
    type: "POST",
    url: pet_url,
    async:false,
    data: params,
        success: function(json){
            do_fill_list(json, next_list);
        }
    });            
}            

function do_fill_list(json, next_list){
    var x = "#" + next_list;
    var option = $(x);

/*------------------------------------------------------------------------------
EDIT:
    Below is the solution I found for this issue. 
    Basically we capture the current list with the switch, empty it,
    append it with a blank line, then let the rest of the code populate the list.
-------------------------------------------------------------------------------*/
   switch(next_list){
        case "pet":
            options.html("").append("<option />");
            break;

        case "pedigree":
            options.html("").append("<option />");
            break;

        case "pet_name":
            options.html("").append("<option />");
            break;

    }
//-------------------------------------END EDIT------------------------------------
    $.each(json.control, 
        function(i,control){
            switch(next_list){
                case "pet":
                    option.append($("<option />").val(control.pet).text(control.pet));
                    break;
                case "pedigree":
                    option.append($("<option />").val(control.pedigree).text(control.pedigree));
                    break;
                case "pet_name":
                    options.append($("<option />").val(control.pet_name).text(control.pet_name));
                    break;               
            }
        }
    );
}

データのバックエンドフェッチを処理するためにPHP関数を呼び出しますが、テストする必要がある場合は、このデータをハードコーディングできることに注意してください。また、最後のJS関数にコメント行があります。これについてはよく読んでいます。問題を解決するために実装する必要があるrefreshメソッドです。私はこれを行うための無数の方法を試しましたが、明らかに十分ではありません。

編集：この問題を解決するswitchステートメントを追加しました。これは「dofilllist」JSメソッド内にあります。

4

2 に答える 2

1

編集

すみません、携帯だと気付くのが遅すぎました..

試す$(next_list).selectmenu('refresh', true);

:(

于 2012-04-13T14:20:19.680 に答える
0

以下のコードは私の質問に対する解決策です (完全なコードと編集されたコードについては上記を参照してください。基本的に必要なことは、選択したリスト ビューをキャプチャし、それを空にして、空のオプションを追加することだけです。なぜ空のオプションなのですか?リスト ビューをクリックすると、最初の選択肢を選択できなくなります。変更したい場合に、最初の選択肢を選択できないことがあります。

このコードを do_fill_list メソッドの var option = $(x); の間に挿入します。および $.each(json.control (...) 関数:

switch(next_list){
    case "pet":
        options.html("").append("<option />");
        break;

    case "pedigree":
        options.html("").append("<option />");
        break;

    case "pet_name":
        options.html("").append("<option />");
        break;

}

このコードは、親の選択が変更されたときに子の選択をクリアするように拡張できます。私はまだこの機能に取り組んでいます。誰かがそれを必要とするなら、あなたはそれを求めることができます.私はすぐにそれを成し遂げると確信しています.

于 2012-04-14T07:13:54.990 に答える