2

別のファイルを呼び出し、ドロップダウン値に基づいて出力を吐き出す次のものがあります。送信ボタンがないと正しく動作しないように見えることを除けば、正常に動作します。process.phpこれは、正しい出力で自分自身をリダイレクトすることを除いて機能します。このコードの要点は、空の div ( output) 内に出力を表示することです。

$(document).ready(function() {
   $('#dropdown').change( function() {
       $('#myform').submit();
       $.ajax({ // create an AJAX call...
           data: $(this).serialize(), // get the form data
           type: $(this).attr('method'), // GET or POST
           url: $(this).attr('action'), // the file to call
           success: function(response) { // on success..
               $('#output').html(response); // update the DIV
           }
       });
       return false; // cancel original event to prevent form submitting
    });
});


<form id="myform" method=POST action="process.php">
<select id="dropdown" name="dropdown">
    <option value="QU">QU</option>
    <option value="QF">QF</option>
    <option value="QC">QC</option>
</select>
</form>
<div id="output"></div>
4

3 に答える 3

6

ajaxを使用する場合は、フォームを送信しないでください。ドロップダウン変更イベントにthisは、フォームではなくドロップダウン要素があります。

$(document).ready(function() {
   $('#dropdown').change( function() {
       $.ajax({ // create an AJAX call...
           data: $('#myform').serialize(), // serialize the form
           type: $('#myform').attr('method'), // GET or POST from the form
           url: $('#myform').attr('action'), // the file to call from the form
           success: function(response) { // on success..
               $('#output').html(response); // update the DIV
           }
       });
    });
});
于 2012-12-19T17:42:01.270 に答える
5

JQuery ロード機能は、より少ないコードで目的を達成できると思います。

$(document).ready(function() {
   $('#dropdown').change( function() {

    $('#output').load('/process.php',{dropdown: $(this).val()});

    });
});


<select id="dropdown" name="dropdown">
    <option value="QU">QU</option>
    <option value="QF">QF</option>
    <option value="QC">QC</option>
</select>
于 2012-12-19T17:47:07.837 に答える
0

このようにする必要があります：

これが何をしているのか：

  1. ドロップダウンの変更時
  2. ajaxを使用しているため、フォーム送信のデフォルトの動作を防止する必要がありますprevDef()

  3. 次に、あなたのajax呼び出し whichsubmits the valueとprocess it to process.php出力response on process.php gets loaded#output div

    $(document).ready(function() {
  $('#dropdown').change( function() {
       $.ajax({ // create an AJAX call...
           data: $(this).serialize(), // get the form data
           type: $(this).attr('method'), // GET or POST
           url: $(this).attr('action'), // the file to call
           success: function(response) { // on success..
               $('#output').html(response); // update the DIV
           }
       });
    });
});
于 2012-12-19T17:44:06.287 に答える