如何调用下拉更改事件AJAX请求? [英] How to call AJAX request on dropdown change event?
本文介绍了如何调用下拉更改事件AJAX请求?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
的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]);
}
});
});
});
以上code完美地工作。当我点击链接'一',那么字符串'一'被加载到工作区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.
问:
现在我想用一个下拉加载one.php和two.php工作区DIV,而不是在index.php文件的链接。当我使用链接,然后我在链接属性使用类=AJAX,但如何调用上下拉更改事件Ajax请求?
感谢
推荐答案
更改code是这样的:
Change your code like this:
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请求?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文