In Wordpress how to use multiple form select to add and show a data?

Question

I am using to select menu to select Country-> State-> Area to show a Map.

if selecting a Country > State to be change dynamical and alse Area.

how to add the data in wordpress. example I need to add a country state and area and to be link together.

ex:

country : india, singapore.

state : india>tamilnadu

city : india> tamilndu> chennai.

how to add this in wordpress and how to set parent?

Answer 1

To make this you have 2 options.

Use only the frontend. Use the database.

To use the frontend only you might do something like this

<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" />

and at your javascript part

$("#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
});

So, the other option is using DB, this one is more complex, but basically you need to do the same, but getting the select values with an ajax.

To make an ajax in wordpress is quite simple, just read about it here

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

It will let you invoke the ajax function that you will set inside the .change function , like this

 $("#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
 }