0

JQuery Mobile、Javascript、HTML、JSON、AJAX、PHP、および MySQL を使用して、データベースの値を Web ページに動的に表示しています。

一緒に働くいくつかの要素があります。1 つ目は、リスト ビューにデータを入力するドロップダウン メニューです。ドロップダウン メニューの要素は、データベースから取得されます。これは、「変更時」メソッドを介して行われます。有効にすると、選択したオプションとドロップダウン メニューの ID が JSON 関数に渡されます。JSON 関数は、PHP と関数を使用してデータベースからデータを取得します。また、データベースから取得してリスト ビューに表示する結果のタイプに対するフィルターとして機能するラジオ ボタンもあります。

私の問題は、見た目よりも単純であることを願っています。ドロップダウン メニューから選択したオプションの値を JSON 関数に渡そうとしています。JSON がオブジェクトを必要としていることは知っていますが、これを行うのに問題があります。

これを行う方法を説明するために、果物のドロップダウン リスト、赤い果物または緑の果物から選択できるラジオ ボタン、および結果を表示するリスト ビューがあるとします。

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">

        <input type="radio" name="radio" id="red" value="1" checked="checked" onchange="change_fruit_color('red');"/>
        <label for="red">Red Fruits</label>
        <input type="radio" name="radio" id="green" value="2" onchange="change_fruit_color('green');"/>
        <label for="green">Green Fruits</label>

    </fieldset>
</div>

<li>
    <label for="fruit" class="select">Fruits</label>
    <select name="fruit" id="fruit" data-mini="true" onclick="populate_list('fruit', this);" onchange="clear_dropdown('fruit'); refresh_dropdown('fruit');">
        <option value=""></option>
    </select>
</li>

追加の関数がいくつかあることに注意してください。refresh_dropdown() と clear_dropdown() は、ドロップダウン リスト項目の更新を処理します。心配する必要はありません。populate_list 関数もうまく機能します。問題は、change_fruit_color() 関数のロジックに関するものです。

function change_fruit_color(fruit_color)
{
    var selected_value = $("#fruits option:selected").text();

    if(selected_value)
    {
        switch(fruit_color)
        {
            case "red":
            populate_list('red', selected_value);
            break;

            case "practice":
            populate_list('green', selected_value);
            break;
        }
        clear_dropdown("fruit");
        refresh_dropdown("fruit");
    }
}

function populate_list(selected_fruit, this_menu)
{
    var find_fruit_url = server_root_url + 'fruit/find_fruit.php';
    var value = this_menu.options[this_menu.selectedIndex].value;

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

    $.ajax({
    type: "POST",
    url: find_fruit_url,
    async:false,
    data: params,
        success: function(json){
            json_populate(json, selected_fruit, value);
        }
    });            
}

ご覧のとおり、populate_list を 3 回呼び出すことができます。1 つはドロップダウン リストの「onclick」関数内で、もう 1 つはラジオ ボタン ボックスの「onchange」イベントを介して呼び出される change_fruit_color 内です。ここに問題があります。

私は一般的な問題のサンプルを作成しようとしました。これにより、すべての人が読むコードを大幅に減らすことができます。続行する方法についてのヘルプは大歓迎です!

4

3 に答える 3

2

You're passing selected_value as the second argument to populate_list, but your second argument (this_menu) is supposed to be the select if you want to get the options property on it. I would rename the this_menu argument to selected_value and use that instead of fetching the value from the select again.

于 2012-06-08T17:56:51.700 に答える
1

json_populate 関数を投稿して、そこで何が起こっているかを確認してください。JSON配列を適切にフォーマットする方法が時間の節約になるかもしれません。JSON配列を扱うときは、次の表記法を使用する必要があることに注意してください...

var myJsonArray = {
                    "name_1": value1,
                    "name_2": value2
                  };

したがって、おそらくあなたのパラメータの変数は次のようになるはずです：

var params = {
    "control": selected_fruit,
    "value": value
};

お役に立てれば。ルイス M.

于 2012-06-08T17:04:08.820 に答える
1

このコードを使用して、同様の問題を解決しました。

$.post(urlpath,formData,'json')

    .done(function(data) {

    $.each(data.collection, function (key, value) {
    $("#priorityid").append("<option value='"+value.codemaster_detls_name+"'>" + value.codemaster_detls_name + "</option>");

})

Priorityid は特定のリストの ID です。codemaster_detls_name は、データを取得する mysql テーブルの名前です。

于 2015-06-24T03:01:54.613 に答える