如何通過JQuery / Javascript將選定的下拉菜單值正確傳遞給JSON函數

Question

我正在使用JQuery Mobile，Javascript，HTML，JSON，AJAX，PHP和MySQL將數據庫中的值動態顯示到網頁上。

我有幾個要素一起工作。 首先，一個下拉菜單填充一個列表視圖。 下拉菜單元素是從數據庫中獲得的。 這是通過“ on change”方法完成的，當激活時，它將選定的選項和下拉菜單的ID傳遞給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三次。 一次在下拉列表的“ onclick”功能內，另一次在change_fruit_color內，通過單選按鈕框中的“ onchange”事件調用。 問題就在這里。

我嘗試對我的一般性問題進行抽樣，以便減少編寫代碼的方式，以供大家閱讀。 任何對如何進行的幫助將不勝感激！

Answer 1

您正在將selected_value作為第二個參數傳遞給populate_list ，但是如果您想在其上獲得options屬性，則應該將第二個參數（ this_menu ）作為select 。 我將this_menu參數重命名為selected_value並使用它代替從select再次獲取值。

Answer 2

請發布您的json_populate函數以檢查發生了什么。 也許省時將是您正確格式化JSON數組的方式。 請記住，在處理JSON數組時必須使用以下符號...

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

因此，也許您的param的var應該這樣：

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

希望這可以幫助。 路易斯M.

Answer 3

我通過使用以下代碼解決了類似的問題：

$.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表名。