在Wordpress中如何使用多种形式选择添加和显示数据？

Question

我正在使用选择菜单来选择“国家”->“州”->“区域”以显示地图。

如果选择“国家/地区”>“要更改动态和其他区域的州”。

如何在WordPress中添加数据。 示例我需要添加一个国家/地区和区域并将其链接在一起。

例如：

国家：印度，新加坡。

州：印度>泰米尔纳德邦

城市：印度>塔米尔杜>钦奈。

如何在WordPress中添加这个以及如何设置父？

Answer 1

为此，您有2个选项。

仅使用前端。 使用数据库。

要仅使用前端，您可以执行以下操作

<select name="select1" id="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>


<select name="select2" id="select2">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
 </select>

<input id="show-map" value="show-map" />

在你的javascript部分

$("#select1").change(function() { 
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select2 option').clone());
    } 
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});

$("#show-map").click(function(){
    //here you capture the input values and do what you need to do
});

因此，另一种选择是使用DB，这比较复杂，但是基本上您需要这样做，但是要用ajax获取选择值。

在wordpress中制作ajax非常简单，只需在此处阅读

https://premium.wpmudev.org/blog/using-ajax-with-wordpress/

它将允许您调用将在.change函数内部设置的ajax函数，如下所示

 $("#select1").change(function() { 
   //here you might want to get the value of this select to later associate it with your database, so do something like $(this).val();
$.ajax({url: "/your-url", success: function(result){
        $("#states").html(result);
    }});  
//you might get the select as a result of your ajax.. it should be easy to be done
 }