php - Prevent a selected <option>-tag from being overwritten by .html() -

i have php file fetches rows of car brands database, echoes these "<option value=\"$brand\">" . $brand . "</option>"; , puts them inside pre-written <select>tags.

my issue first item appears in select box not passing value onwards.

the value of select box changed event

$('select[name=model]').on('change', function() {   selectedmodel = $("#select-model").val() }); 

the <option>-tags generated loop in brands.php:

while ($row = mysqli_fetch_array($result)) {   $brand = $row['brand'];   echo "<option value=\"$brand\">" . $brand . "</option>"; } 

the brands fetched function:

function fetchbrands() {   $.ajax({     type: "post",     url: "script/rent/brands.php",     data: {datefrom: selecteddatefrom,             dateto: selecteddateto,             destination: selecteddestination},      success: function(data) {         $("#select-brand").html(data);       }   }); } 

because data posted #select-brandwith .html() can't set default value select box because gets overwritten. appending options result in duplicates etc. fetchbrands() dependent on previous set of radio buttons , select boxes.

what i'd suggest in success function, add code gets first element in select tag, updates selectedbrand, , triggers code that's attached change event. if refactored code added reference handler code, make easier.

$('select[name=model]').on('change', somefunction());  function somefunction(){     selectedmodel = $("#select-model").val() }  function fetchbrands() {   $.ajax({     type: "post",     url: "script/rent/brands.php",     data: {datefrom: selecteddatefrom,             dateto: selecteddateto,             destination: selecteddestination},      success: function(data) {         $("#select-brand").html(data);         $("#select-brand").val($("#select-brand option:first").val());         somefunction();       }   }); } 

before information added:

to have element of <select>...</select> automatically selected on page render, need add attribute selected="selected" <option /> want selected.

alternatively, add hook document load sets selected brand.

or, have first option this:

<option disabled="disabled" selected="selected">choose brand</option>