0

我正在使用 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”函数中，另一个在通过单选按钮框中的“onchange”事件调用的 change_fruit_color 中。这就是问题所在。

我试图为我的一般问题制作一个示例，以便我编写更少的代码供大家阅读。任何有关如何进行的帮助将不胜感激！

4

3 回答 3

2

您将selected_value作为第二个参数传递给populate_list，但您的第二个参数 ( this_menu) 应该是select如果您想获得options它的属性。我会将this_menu参数重命名为selected_value并使用它，而不是从select再次获取值。

于 2012-06-08T17:56:51.700 回答
1

请发布您的 json_populate 函数以检查那里发生了什么。也许可以节省时间的是您正确格式化 JSON 数组的方式。请记住，在处理 JSON 数组时，您必须使用以下表示法...

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

所以也许你的参数的 var 应该是这样的：

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 回答