AJAX loaded select, select option by value

Question

How to select option by value, if the select is loaded via AJAX

index.php

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <div id="data"></div>
</body>

<script>
function LoadSelect() {

    var post_data = {
        token: "test"
    };

    $.ajax({
        type: 'POST',
        url: 'load_select.php',
        data: post_data,
        dataType: "json",
        beforeSend: function() {},
        success: function(data) {
            $("#data").html(data["msg"]);
        },
        complete: function() {}
    });
}
$(document).ready(function() {
    LoadSelect();
});
</script>

</html>

load_select.php

<?php

// Value from the database
$gender = "female";

$html = '

<select class="form-control" id="gender" name="gender">
    <option value="female">Female</option>
    <option value="male">Male</option>
</select>

<script>
$("#gender").val("'.$gender.'");
</script>

';

echo json_encode(array('msg' => $html));

Tried this code, but it's not working.

The problem solved, the $gender variable gets wrong value from the database like "f" and not "female".

Answer 1

If I understand you correctly then you override the select with html from your ajax request. In order to maintain the value you will need to store the original value, then override the html and then restore the original value. See this snippet below.

Better would be to not override the html element with your ajax call but only update the information that need to be updated.

 $("#gender").val("male"); //Lets pretend this onclick handler is your ajax succes handler. $('#MimicAjax').on('click', function(){ //Fake ajax result for demonstraion purpose var ajaxResult = '<select class="form-control" id="gender" name="gender"><option value="female">Female</option><option value="male">Male</option></select>'; //store the original value var originalValue = $("#gender").val(); //Do your ajax thingy $('#data').html(ajaxResult); //restore original value $("#gender").val(originalValue); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="data"> <select class="form-control" id="gender" name="gender"> <option value="female">Female</option> <option value="male">Male</option> </select> </div> <button id="MimicAjax">MimicAjax</button>

If you just want to set the value after you added the html with ajax then just use that line within the succes handler after you changed the html.

$.ajax({
    type: 'POST',
    url: 'src/ajax/load_select.php',
    data: post_data,
    dataType: "json",
    beforeSend: function() {},
    success: function(data) {
         $("#data").html(data["msg"]);
         $("#gender").val("male");
    },
    complete: function() {
    }
});

Answer 2

通常，通过代码更改选择的值后应触发更改事件，如下所示$("#gender").trigger('change');

AJAX loaded select, select option by value

Question

2 answers

solution1
0 2019-07-25 07:59:49

solution2
0 2019-07-25 08:01:34

AJAX loaded select, select option by value

Question

2 answers

solution1 0 2019-07-25 07:59:49

solution2 0 2019-07-25 08:01:34

solution1
0 2019-07-25 07:59:49

solution2
0 2019-07-25 08:01:34