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>
一个.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>