Auto selecting an option in a drop-down menu based on the result of an ajax response

Question

I am trying to open a form which contains a drop-down select menu and have the option already selected based on the response from an ajax call. From what I have read I should be using the following code to select the option in the dropdown based on the ajax response. I have tried all sorts of combinations using the prop('selected', true but nothing I have tried works.

$('#EditRoomOverrideRoom option').val(result[2]).prop('selected', true);

My drop-down menu:

<select size="1" name="EditRoomOverrideRoomSelect" class="input-field" id="EditRoomOverrideRoom" required>

do {

<option value="<?php echo $row_MultiRoomSelect['ConfRoomID']?>"><?php echo $row_MultiRoomSelect['ConfRoomName']?></option>

} while ($row_MultiRoomSelect = mysql_fetch_assoc($MultiRoomSelect));
$rows = mysql_num_rows($MultiRoomSelect);
if($rows > 0) {
mysql_data_seek($MultiRoomSelect, 0);
$row_MultiRoomSelect = mysql_fetch_assoc($MultiRoomSelect);
}

</select>

May ajax response:

success: function(data){
    var result = JSON.stringify(data);
    result = JSON.parse(result);
    console.log("RESULT", result);
    var recordid = result[0];
    $('#EditRoomOverrideRecordID').val(result[0]);
    $('#EditRoomOverrideRoomID').val(result[1]);
    $('#EditRoomOverrideRoom option').val(result[2]).prop('selected', true);
    $('#EditRoomOverrideClientName').val(result[3]);
    $('#EditRoomOverrideFromDate').val(result[4]);
    $('#EditRoomOverrideFromTimeH').val(result[5]);
    $('#EditRoomOverrideFromTimeM').val(result[6]);
    $('#EditRoomOverrideToDate').val(result[7]);
    $('#EditRoomOverrideToTimeH').val(result[8]);
    $('#EditRoomOverrideToTimeM').val(result[9]);
    $('#EditRoomOverrideCompanyImage').val(result[10]);
    var imagepath = '../../../../conf/conf_images/roomoverride/'+ hotelid +'/'+ result[10];
    //$("#EditRoomOverrideCompanyImage").attr("src",imagepath);
    $("#EditRoomOverridePreview").attr("src",imagepath);
    $('#EditRoomOverrideFullBoardRoom').val(result[10]);
}

Where am I going wrong?

score 3 · Accepted Answer · answered Nov 20 '19 at 18:29

You don't need to specify the option element on jquery selector or call prop('selected', true) on select elements, only use .val()

<select id="mySelect">
    <option value="opt1">Opt 1</option>
    <option value="opt2">Opt 2</option>
    <option value="opt3">Opt 3</option>
</select>

$('#mySelect').val('opt2');

Just keep in mind the value passed by parameter to .val() must be a valid option inside your select element

Auto selecting an option in a drop-down menu based on the result of an ajax response

1 Answers1