0

選択ボックスに入力するために jQuery Ajax 関数を使用しています。コードは次のとおりです。

    $(function(){             
        $("#maker").change(function(){            
        var selected_value = $("#maker").val();      

        $.ajax({
            type: "POST",
            url: "search.php",
            data: ({_maker: selected_value}),
            success: function(response){
                $("#models").html(response);
            }
        });        
        });
    });

問題は、これがdivの「モデル」をsearch.phpページ全体に置き換えることです!!! 「モデル」内にオプション値を入力したいだけです。

HTMLは次のとおりです。

<div id="models">
<select id="model" name="model" style="width:170px">
<option value="Any">Any</option>
<?php
    foreach($current_models as $model) {
?>
    <option value="<?php echo $model; ?>"><?php echo $model; ?></option>

<?php
    }
?>
</select></div>

どんな助けでも大歓迎です。前もって感謝します。

4

1 に答える 1

0

したがって、HTML ページ全体を返しているように見えますが、ページの特定の部分を見つけるために検索していません。次のようなことを試してください：

$(function(){             
    $("#maker").change(function(){            
    var selected_value = $("#maker").val();      

        $.ajax({
            type: "POST",
            dataType: "html",
            url: "search.php",
            data: ({_maker: selected_value}),
            success: function(response){
                $("#models").html($(response).find('#someDiv').html());
            }
            error: function(){
                  $("#models").html('Uh oh! Something went wrong and we weren't able to process your request correctly.');
            }
        });        
    });
});

次の 2 つの点に注意してください。

  1. プロパティを指定しましたdataType。これは、jQuery に何を期待するかを伝えます。さらに、htmlデータ型は、ページを応答オブジェクトにレンダリングする前に、読み込まれたページで JavaScript を実行するように jQuery に指示します。

  2. 応答を使用して jQuery オブジェクトを作成し、jQuery の.find()メソッドを使用して応答内の特定の内部 HTML を取得していますdiv。

JS Fiddle の例を次に示します。概念を証明するためにいくつかの変更を加えています: http://jsfiddle.net/rvk44/1/

また、エラー プロパティを追加して、ページがエラーとして戻ってきた場合に、ユーザーがそれを認識し、何かが起こることを期待して空白の画面を見つめているだけではないことに注意してください。(例に基本的なエラー メッセージを追加しました。返されるエラー プロパティの詳細については、 jQuery のドキュメントを参照してください)。

于 2013-07-18T13:59:56.827 に答える