How to show cities according to the state in Form using Javascript?

I am working on the Contact Form 7 and I want to show the cities according to state in contact form 7.

I have also used the plugin but it is not working according to the condition and I don’t want the country field in that. That’s why I am trying my own code.

I cant ask this question in Contact Form 7 Forum because this is developer need and it requires some JavaScript knowledge.

My Code:

[select* your-state first_as_label "Select Your State*" "Andaman and Nicobar Islands" "Andhra Pradesh" "Arunachal Pradesh" "Assam" "Bihar" "Chandigarh" "Chhattisgarh" "Dadra and Nagar Haveli" "Daman and Diu" "Delhi" "Goa" "Gujarat" "Haryana" "Himachal Pradesh" "Jammu and Kashmir" "Jharkhand" "Karnataka" "Kerala" "Ladakh" "Lakshadweep" "Madhya Pradesh" "Maharashtra" "Manipur" "Meghalaya" "Mizoram" "Nagaland" "Odisha" "Puducherry" "Punjab" "Rajasthan" "Sikkim" "Tamil Nadu" "Telangana" "Tripura" "Uttar Pradesh" "Uttarakhand" "West Bengal"]

[select* your-city first_as_label "Select Your City*"]

I have the cities list: https://github.com/ajayrandhawa/Indian-States-Cities-Database

Any help is much appreciated.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I got the solution for this.

Just Add This Code In Contact Form 7:

<select name="stt" id="sts" class="form-control"  required="" onchange="print_city('state', this.selectedIndex);"></select>
<select name="city" id="state" class="form-control" required=""></select>
<script language="javascript">print_state("sts");</script>

And This In Functions.php

function my_theme_scripts_function() {
   wp_enqueue_script( 'myscript', get_template_directory_uri() . '/cities.js');
}
add_action('wp_enqueue_scripts','my_theme_scripts_function');

You Can Take The Cities.js File From Here: https://github.com/ajayrandhawa/Indian-States-Cities-Database

In this, you can add cities you want.

For The Mail:

State: [stt]
City: [city]

This is the solution.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0