在Wordpress选项页面中动态生成下拉列表

时间:2012-05-29 19:30:20

标签: php mysql ajax wordpress

我有一个我正在处理的插件,其中一部分包含选项页面上的“条件”下拉列表。基本上,我有一个带有三个选项的下拉列表,第二个下拉列表会根据第一个下拉列表中选择的内容填充数据库中的信息。问题是,我对如何填充第二个下拉列表感到茫然!我对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 个答案:

答案 0 :(得分:4)

上述代码无效的原因是$("mySelect").val()返回value的{​​{1}}属性,而不是开始和结束标记之间的文本。看我的小提琴:http://jsfiddle.net/XhujD/

因此,您可以通过更改

来解决问题
<option>

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

使用AJAX填充第一个下拉列表时第一个下拉列表将基本上如下所示:

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