从动态选择中运行Ajax，并选择从DB中检索的选项

Question

I have the following select with options retrieved from Database

<select name="type_service" id="type_service" class="type_service">
    <option value="Airport Transfer">Airport Transfer</option>
    <option value="Private Tour">Private Tour</option>
    <option value="Shared Tour" selected="selected">Shared Tour</option>
    <option value="Shore Trip">Shore Trip</option>
    <option value="Port Transfer">Port Transfer</option>
</select>

I don't know how to run ajax from the selected option "Shared Tour" when the page is loaded. With the change function as follows user has to change and then reselect Shared Tour to get the ajax response, I need this onload instead.

$(document).ready(function(){
    $(".type_service").change(function(){
    var id=$(this).val();
    var dataString = "id="+ id;

    $.ajax({
    type: "POST",
    url: "ajax/ajax_type.php",
    data: dataString,
    cache: false,
    success: function(html){
        $(".result").html(html);
    }
    });

    });

}); 

Thanks

Answer 1

Not tested, but that you need is something like:

$(document).ready(function() {
ajax_request($( "#type_service option:selected" ).val());

  $(".type_service").change(function() {
    var id = $(this).val();
    ajax_request(id);
  });

});
function ajax_request(id){
        var dataString = "id=" + id;
    $.ajax({
      type: "POST",
      url: "ajax/ajax_type.php",
      data: dataString,
      cache: false,
      success: function(html) {
        $(".result").html(html);
      }
    });
}