Wordpress 选项页面中动态生成的下拉菜单

Posted

技术标签:

【中文标题】Wordpress 选项页面中动态生成的下拉菜单【英文标题】:Dynamically generated dropdown in Wordpress options page 【发布时间】:2012-06-04 01:11:24 【问题描述】:

我正在开发一个插件,其中一部分包含选项页面上的“条件”下拉菜单。基本上,我有一个包含三个选项的下拉菜单,第二个下拉菜单会根据第一个下拉菜单中选择的内容填充来自数据库的信息。问题是,我不知道如何填充第二个下拉列表!我对 AJAX 不是很擅长,但它似乎是可能的解决方案。经验丰富的开发者有什么想法吗?

编辑:这是我目前所在的位置,但它似乎永远不会运行:

<form action="<?php echo site_url() ?>/wp-admin/admin.php?page=ad_manager&pagetype=addedit&pid=<?php echo $_REQUEST['id']; ?>" method="post" name="ad_success">
    <table cellpadding="5" class="widefat post fixed">
        <thead>
            <tr>
                <th><strong><?php if($_REQUEST['id'] != '')  _e('Edit Ad');  else  _e('Create Ad');  ?></strong></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <label for="gtad_condition">
                        <strong><?php _e('Ad Condition'); ?>:</strong>
                        <select name="ad_condition" id="ad_condition">
                            <option value="">Select an option...</option>
                            <option value="is_city">Is City</option>
                            <option value="is_location">Is Location</option>
                            <option value="is_page">Is Page</option>
                        </select>
                    </label>
                    <label for="gtad_location">
                        <select name="ad_location" id="ad_location"></select>
                    </label>
                </td>
            </tr>
        </tbody>
    </table>
</form>

<script>
    jQuery(document).ready(function() 
        $ad_condition = $("select[name='ad_condition']");
        $ad_location = $("select[name='ad_location']");

        $ad_condition.change(function() 
            if ($(this).val() == "Is City") 
                $("select[name='ad_location'] option").remove();
                $("<option>Test</option>").appendTo($ad_location);
            
        );
    );
</script>

【问题讨论】:

【参考方案1】:

您上面的代码不起作用的原因是因为$("mySelect").val() 返回&lt;option&gt;value 属性,而不是开始和结束标记之间的文本。看我的小提琴:http://jsfiddle.net/XhujD/。

所以,你通过改变来解决问题

if ($(this).val() == "Is City") 

进入

if ($(this).val() == "is_city") 

当第一个下拉列表发生变化时,使用 AJAX 填充第二个下拉列表基本上如下所示:

// wait until the first list has changed
$("#list1").change(function()

    // call a script using AJAX and pass the selected value
    $.post('myScript.php', myValue: $(this).val(), function(data)
        // clear the second list
        $("#list2").find("option").remove();

        // add the options based on the 'data' variable
        $("#list2").append('<option value="myOption">' + data + '</option>')
    );

);

【讨论】:

以上是关于Wordpress 选项页面中动态生成的下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章

WordPress 中的 AJAX 只返回 0

在 Wordpress 中从类别创建帖子的下拉菜单

基于第一个下拉菜单的引导多选动态选项

wordpress如何让自己的主题支持菜单功能

wordpress 主题定制器下拉菜单

当用户从下拉菜单中选择选项时,如何从数据库中打印记录?动态程序