問題描述

index.php

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>

<a href='one.php' class='ajax'>One</a>
<a href='two.php' class='ajax'>Two</a>

<div id="workspace">workspace</div>

one.php

$arr = array ( "workspace" => "One" );
echo json_encode( $arr );

two.php

$arr = array( 'workspace' => "Two" );
echo json_encode( $arr );

ajax.js

jQuery(document).ready(function(){
    jQuery('.ajax').live('click', function(event) {
        event.preventDefault();
        // load the href attribute of the link that was clicked
        jQuery.getJSON(this.href, function(snippets) {
            for(var id in snippets) {
                // updated to deal with any type of HTML
                jQuery('#' + id).html(snippets[id]);
            }
        });
    });
});

以上代碼運行良好.當我點擊鏈接一"時，字符串一"被加載到工作區 DIV 中，當我點擊鏈接二"時，字符串二"被加載到工作區 DIV.

Above code is working perfectly. When I click link 'One' then String 'One' is loaded into workspace DIV and when I click link 'Two' then String 'Two' is loaded into workspace DIV.

問題:

現在我想使用下拉菜單在工作區 DIV 中加載 one.php 和 two.php，而不是在 index.php 中加載鏈接.當我使用鏈接時，我在鏈接屬性中使用 class='ajax' 但如何在下拉更改事件上調用 ajax 請求?

謝謝

推薦答案

像這樣改變你的代碼:

jQuery('#dropdown_id').live('change', function(event) {
    jQuery.getJSON($(this).val(), function(snippets) {
        for(var id in snippets) {
            // updated to deal with any type of HTML
            jQuery('#' + id).html(snippets[id]);
        }
    });
});

你的下拉菜單應該是這樣的:

And your dropdown should look like this:

<select id="dropdown_id">
  <option value="one.php">One</option>
  <option value="two.php">Two</option>
</select>

這篇關于如何在下拉更改事件上調用 AJAX 請求?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！