如何使用JQuery将html选项文本作为select标记的值传递到php $ _post中

Question

I have this following select tag where its option tags are dynamically generated by php:

<select  class="form-control "  name="list" id="list" onchange="" >
   <!-- option tags are dynamically generated-->    
</select>

these are some sample options that will be dynamically generated:

<option value="1">Item-1</option>
<option value="2">Item-2</option>
<option value="3">Item-3</option>

When i use var_dump($_POST) i got array (size=1) 'list' => string '1' for selecting option Item-1 .But i want to pass option text like 'list' => string 'Item-1' to $_POST .Also i need the original option value.i try this ajax but didn't work:

$("#list").val(this.options[this.selectedIndex].text);

So what ajax i need to do it in correct way.Thanks

Answer 1

You can simply set the option value to the text you want to recieve:

<option value="Item-1">Item-1</option>
<option value="Item-2">Item-2</option>
<option value="Item-3">Item-3</option>

Or you can get the option text and value like this:

var optionText = $("#list option:selected").text();
var optionValue = $("#list").val();

and later send it to the server via jQuery.ajax() request:

$.ajax({
  method: "POST",
  url: "yourFile.php",
  data: { text: optionText , val: optionValue }
})
  .done(function( result ) {
      // handle the result
  });

In the yourFile.php you'll have this $_POST data:

array(
   'text' => 'selected option text',
   'val' => 'selected option value',
)