[英]How to call AJAX request on dropdown change event?
的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]);
}
});
});
});
上面的代碼工作得很好。 當我單擊鏈接'One'時,字符串'One'被加載到工作區DIV中,當我單擊鏈接'Two'時,字符串'Two'被加載到工作區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]);
}
});
});
你的下拉列表應如下所示:
<select id="dropdown_id">
<option value="one.php">One</option>
<option value="two.php">Two</option>
</select>
在下拉列表中將href指定為列表項值。 更改下拉列表,進行ajax調用。
類名“ajax”僅供參考(如果您想處理超過一個元素的事件,則非常有用)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.