我想在Wordpress中生成州 - 区下拉多选下拉列表。根据国家的选择,区必须加载..
如果有可用的插件,请建议我..
我最近写了一篇关于此的博文:http://bdwm.be/how-to-create-dynamically-populated-cascading-dropdown-lists-for-contact-form-7/。这个例子是汽车,但我应用于你的情况,它看起来像这样:
您可以从包含所有州/区的CSV文件开始,如下所示:
State,District
Alabama,"District 1"
Alabame,"District 2"
....
将其保存为states_districts.csv并将其放在服务器上的某个位置。 (在此示例中,我将其放在wp-content / uploads文件夹中)
然后使用联系表单7插件创建2个选择字段:
[select states]
[select districts]
接下来,在页面的页脚中创建一些javascript,它将执行AJAX调用
<script>
(function($) {
// create references to the dropdown fields for later use.
var $states_dd = $('[name="states"]');
var $districts_dd = $('[name="districts"]');
// run the populate_fields function, and additionally run it every time a value changes
populate_fields();
$('select').change(function() {
populate_fields();
});
function populate_fields() {
var data = {
// action needs to match the action hook part after wp_ajax_nopriv_ and wp_ajax_ in the server side script.
'action' : 'cf7_populate_values',
// pass all the currently selected values to the server side script.
'state' : $states_dd.val(),
'district' : $districts_dd.val(),
};
// call the server side script, and on completion, update all dropdown lists with the received values.
$.post('<?php echo admin_url( 'admin-ajax.php' ) ?>', data, function(response) {
all_values = response;
$states_dd.html('').append($('<option>').text(' -- choose state -- '));
$districts_dd.html('').append($('<option>').text(' -- choose district -- '));
$.each(all_values.states, function() {
$option = $("<option>").text(this).val(this);
if (all_values.current_state == this) {
$option.attr('selected','selected');
}
$states_dd.append($option);
});
$.each(all_values.districts, function() {
$option = $("<option>").text(this).val(this);
if (all_values.current_district == this) {
$option.attr('selected','selected');
}
$districts_dd.append($option);
});
},'json');
}
})( jQuery );
</script>
最后创建服务器端功能,读取CSV文件并将正确的值返回给javascript:
将此添加到functions.php:
function ajax_cf7_populate_values() {
// read the CSV file in the $states_districts array
$states_districts = array();
$uploads_folder = wp_upload_dir()['basedir'];
$file = fopen($uploads_folder.'\states_districts.csv', 'r');
$firstline = true;
while (($line = fgetcsv($file)) !== FALSE) {
if ($firstline) {
$firstline = false;
continue;
}
$states_districts[$line[0]][$line[1]][] = $line[2];
}
fclose($file);
// setup the initial array that will be returned to the the client side script as a JSON object.
$return_array = array(
'states' => array_keys($states_districts),
'districts' => array(),
'current_state' => false,
'current_district' => false
);
// collect the posted values from the submitted form
$state= key_exists('state', $_POST) ? $_POST['state'] : false;
$district = key_exists('district', $_POST) ? $_POST['district'] : false;
// populate the $return_array with the necessary values
if ($state) {
$return_array['current_state'] = $state;
$return_array['districts'] = array_keys($states_districts[$state]);
if ($district) {
$return_array['current_district'] = $district;
}
// encode the $return_array as a JSON object and echo it
echo json_encode($return_array);
wp_die();
}
// These action hooks are needed to tell WordPress that the cf7_populate_values() function needs to be called
// if a script is POSTing the action : 'cf7_populate_values'
add_action( 'wp_ajax_cf7_populate_values', 'ajax_cf7_populate_values' );
add_action( 'wp_ajax_nopriv_cf7_populate_values', 'ajax_cf7_populate_values' );
你想在哪里使用下拉?在插件或主题中或仅在页面中?
这可以使用Ajax调用来完成。通常,您应该在插件/主题中注册Ajax调用处理程序,并在页面中添加动态下拉列表。
http://codex.wordpress.org/AJAX_in_Plugins
jQuery嵌入了Wordpress,请查看本节如何创建动态下拉列表
http://www.jqueryscript.net/demo/Dynamic-jQuery-Cascading-Dropdown-Lists-Plugin/