这是我的Multiple Dropdown代码。
我有两个下拉列表，一个是城市，另一个是地区。
因此，当有人选择一个城市时，区域下拉列表应该会自动填充。
这是的url
http://ctclick.com/category/
<?
$field_key = "field_570e68df39304";
$field = get_field_object($field_key);
if( $field == 'pune' )
{
$field_key = "field_570e68df39304";
$field = get_field_object($field_key);
if( $field )
{
echo '<select name="city" class="form-control" id="city">';
foreach( $field['choices'] as $k => $v )
{
echo '<option value="' . $k . '">' . $v . '</option>';
}
echo '</select>';
}
}
elseif ( $field == 'akola' )
{
$field_key = "field_570e691b39305";
$field = get_field_object($field_key);
if( $field )
{
echo '<select name="city" class="form-control" id="city">';
foreach( $field['choices'] as $k => $v )
{
echo '<option value="' . $k . '">' . $v . '</option>';
}
echo '</select>';
}
}
else
{
?>
<select class="form-control">
<option>Select Area</option>
</select>
<?
}
?>
在这种情况下，您可能需要在代码中使用一些ajax，以便在更改第一个下拉菜单的值时，它会触发ajax调用。为了实现这一点，你必须包含一些类似的javascript
$('#city_dropdown').change(function() {
jQuery.ajax({
url: "/wp-admin/admin-ajax.php",
type: 'POST',
data: {
action: 'get_city_areas',
city_id: $(this).val(),
},
dataType: 'html',
success: function (result) {
$('#area-dropdown').html(result)
},
error: function (errorThrown) {
console.log(errorThrown);
}
})
});
实际情况是，当您的城市下拉列表发生更改时，它会触发Ajax请求来获取所有相关区域。Wordpress中的Ajax是通过管理Ajax系统完成的。你可以在这里阅读更多信息：https://codex.wordpress.org/AJAX_in_Plugins
在functions.php文件中，您可以添加以下内容来注册Ajax调用以检索城市区域
add_action('wp_ajax_get_city_areas', 'handle_get_city_areas');
add_action('wp_ajax_nopriv_get_city_areas', 'handle_get_city_areas');
/**
* Handle the list of areas
*/
function handle_get_city_areas(){
$city_id = $_POST['city_id'];
//Using the city ID, retrieve the related areas
//and then echo the new select menu
}
这应该能帮助你得到你想要的东西。