Can't obtain selected value for AJAX parameter - php

Question

I want to pass id and value of the selected option as parameters to my ajax. Somehow I can see id passing but not the value.
How can this be achieved, I am posting my code here, please any advice will be helpful.
I have tried many ways but still the datString shows up Object { id: "3", designationname2: "3" } on console.log.
<b>Designation</b>
<select name="designation" class="form-control" id="desig" >
<option value="">Select a Designation/Role</option>
<?php
$sql = mysql_query("SELECT id, designation FROM tbl where status =1 and designationtype_id = 1 ");
while ($rows = mysql_fetch_assoc($sql)) {
$des_id2 = $rows['id'];
$designationname2 = $rows['designation'];
echo "<option value=" . $des_id2 . ">" . $designationname2 . "</option>";
}
?>
</select>
And AJAX,
<script src = "http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#desig").change(function () {
var id = $(this).val();
var designationname2 = $('#desig').val();
var dataString = {'id': id, 'designationname2': designationname2};
console.log(dataString);
$.ajax({
type: "POST",
url: "escalation_ajax.php",
data: dataString,
cache: false,
success: function (html) {
$("#rephead").html(html);
}
})
})
})
</script>

Answer 1

You can change below line
var designationname2 = $('#desig').val();
This line will get the value of the selected option, that you don't required
to
var designationname2 = $(this).find("option:selected").text()
Above line will give you text of the selected option of text of the current element.
OR
var designationname2 = $('#desig option:selected').text()
Above line will give the text of any selector with option selected

Answer 2

Try this:
var designationname2 = $(this).find('option:selected').text();

Answer 3

try this one
Use text() instead of val()
var designationname2 = $( "#desig option:selected" ).text();

Answer 4

try this :
var designationname2 = $('#desig option:selected').val();