如何在下拉更改事件中调用 AJAX 请求？

Posted 2023-05-08

【中文标题】如何在下拉更改事件中调用 AJAX 请求？

【英文标题】：How to call AJAX request on dropdown change event?

【发布时间】：2011-03-26 15:26:45

【问题描述】：

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 );

两个.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 中。

问题：

现在我想使用下拉菜单在工作区 DIV 中加载 one.php 和 two.php，而不是在 index.php 中加载链接。当我使用链接时，我在链接属性中使用 class='ajax' 但如何在下拉更改事件中调用 ajax 请求？

谢谢

【参考方案1】：

像这样更改您的代码：

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>

【参考方案2】：

将 href 分配为下拉列表中的列表项值。 Onchange 下拉菜单，进行 ajax 调用。

类名“ajax”仅供参考（有用，如果你想处理多个元素的事件）。