3

私が取り組んでいるプラグインがあります。その一部は、オプション ページの「条件付き」ドロップダウンで構成されています。基本的に、3 つのオプションを含むドロップダウンがあり、最初のドロップダウンで選択された内容に応じて、データベースからの情報が 2 番目のドロップダウンに取り込まれます。問題は、2 番目のドロップダウンに入力する方法がわかりません。私は 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>
4

1 に答える 1

4

上記のコードが機能しない理由は、開始タグと終了タグの間のテキストではなく、の属性を$("mySelect").val()返すためです。私のフィドルを参照してください: http://jsfiddle.net/XhujD/。value<option>

したがって、変更することで問題を解決します

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

の中へ

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

最初のドロップダウンが変更されたときに、AJAX を使用して 2 番目のドロップダウンを設定すると、基本的に次のようになります。

// 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>')
    });

});
于 2012-05-29T19:58:53.470 に答える