bootstrap input field and dropdown button submit mail form - php

Question

I have the following problem. I have a form where I can choose from three options. The problem is that it does not send the selected option while the other sections Name, surname, etc. send. Below I am sending the code:
thank you in advance
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="service-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="drp-name" data-bind="label">Choose</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="service-type">
<li>x1</li>
<li>x2</li>
<li>x3</li>
</ul>
</div>
</div>
php code:
<?php
$to = 'xxx#xx.com';
$subject = "Appointment Form";
$servicetype = stripslashes($_REQUEST['service-type']);
$msg = "";
$msg .= "Service Type: ".$servicetype."\r\n\n"; // add sender's sources to the message
$mail = #mail($to, $subject, $msg, "From:".$email);
if($mail) {
header("Location:index.html");
} else {
echo 'Message could not be sent!';
}
?>
I also added JS but it still does't work
Dropdown Select
$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
var $target = $( event.currentTarget );
$target.closest( '.dropdown' )
.find( '[data-bind="label"]' ).text( $target.text() )
.end()
.children( '.dropdown-toggle' ).dropdown( 'toggle' );
return false;
});

Answer 1

HTML:
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="service-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="drp-name" data-bind="label">Rodzaj usługi</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="service-type">
<li>x1</li>
<li>x2</li>
<li>x3</li>
</ul>
</div>
<input type='hidden' name='service-type'> <!-- ADD THIS -->
</div>
JavaScript:
$(document.body).on('click', '.dropdown-menu li', function(event) {
event.preventDefault();
var $target = $(event.currentTarget);
$target.parents('.dropdown').sibling('[name=service-type]').val($target.text());
});

Answer 2

you cant pass values to php without name attribute and form tag . you can directly set it with select tag
<form action="file.php" method=POST>
<select name=option>
<option value=0 selected>0</option>
<option value=1> 1</option>
</select><input type=button value=submit>
</form>

Answer 3

Suppose the name of form is mail_form, and there is a hidden form element to hold the choice information with id service-type-holder and name service-type. Then the following code could be used with inline Javascript:
<form name="mail_form" id="mail_form" action="" method="post">
<input type="hidden" name="service-type" id="service-type-holder">
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="service-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="drp-name" data-bind="label">Choose</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="service-type">
<li onclick="$('#service-type-holder').val('x1'); $('#mail_form').submit()">x1</li>
<li onclick="$('#service-type-holder').val('x2'); $('#mail_form').submit()">x2</li>
<li onclick="$('#service-type-holder').val('x3'); $('#mail_form').submit()">x3</li>
</ul>
</div>
</div>