Set custom option on select dropdown

Hello,

I am using this plugin since long time, but today I have got stuck somewhere where some customization required for a project.

My project requirement is to create two select dropdowns one for state and the other for places which reuires two select boxes and I will manipulate the show hide places by jQuery.

I already created a custom template for this form but I am just trying to solve this by Contact form 7.

In the contact form 7 I created two select boxes one is State and the other is Places, where I woyld like to change the option values.

Cities is:
[select* menu-105 id:countries "Select Cities" "Delhi|1" "Kolkata|2" "Jaipur|3"]

And Places is:

[select* menu-106 class:states1 class:states "Canaught Place|1" "Chittaranja|1" "Esplanade|2" "Pink Palace|3" ]

but in the options value I am not getting those 1,2,3 whereever getting those names in the value.

I have also tried with a different way:

I have created 3 dropdowns: Cities,States(2)

<p>Your State<br/>
[select* menu-105 id:countries "Select Countries" "Delhi" "Kolkata" "Jaipur"]
</p>

<p>
 Your Places<br/>

[select*  menu-106 class:states1 class:states "Canaught Place" "Chittaranja"  ]
[select*  menu-107 class:states2 class:states "Esplanade" "Ballygunge" "Pink City" ]
</p>

ANd in jQuery A simple code I did:

$('#countries').change(function(){

              if($(this).val() == 'Delhi'){
                 $('.states1').show();
              } else {
                 $('.states1').hide();
              };

              if($(this).val() == 'Kolkata'){
                 $('.states2').show();
              } else {
                 $('.states2').hide();
              };

             });

In the Mail settings I did:

Message Body:
[your-message]
City: [menu-105]
Place: [menu-106] [menu-107]

But what is happening when I am selecting Delhi from front end , in the admin mailbox I am receiving two Places name
Place: Canaught Place Esplanade

This I understand though the the kolkata places are hidden , still it is remaining in the DOM and that value is fetching in the mailbox.

Any help to get rid off this from any of my option?

My query is that why the Pipes are not working? If this would have worked it would be easier for me to manipulate in jQuery without any hackle.

https://wordpress.org/plugins/contact-form-7/