Select2 - incorrect selected value with mysql data

Question

I am using Select2 for my dropdown option. I am populating it in a table form with MySQL data and the form is inside a bootstrap Modal, together with the button to edit or delete.

<div class="btn-group">
    <a class="btn btn-primary" href="#"><i class="fa fa-home"></i> Area</a>
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="fa fa-caret-down"></span></a>
        <ul class="dropdown-menu">
        <?php
        echo "<li><a class=\"open-EditRow\" data-areano=\"".$areano."\" data-area=\"".$area."\" data-centerno=\"".$centerno."\" title=\"Edit this row\" \"><i class=\"fa fa-pencil\"></i> Edit</a></li>";
        echo "<li><a class=\"open-DeleteRow\" data-areano=\"".$areano."\" data-area=\"".$area."\" data-centerno=\"".$centerno."\" title=\"Delete this row\" \"><i class=\"fa fa-trash\"></i> Delete</a></li>";
        ?>
        </ul>
</div>

Then the Edit button will open a Modal to edit details.

<div class="form-group">
  <label class="col-sm-3 control-label">Center</label>
  <div class="col-sm-5">
  <?php                         
    $e = mysql_query("select * from center") or die(mysql_error());
  ?>
    <select class="populate placeholder" name="center" id="center">
        <option value="">-- Select a center --</option>
        <?php
        while($f=mysql_fetch_array($e))
        {
            ?>
            <option value="<?php echo $f['center_no']; ?>" <?php if ($f['center_no']==$centerno) { ?>selected<?php } ?>><?php echo $f['center']; ?></option>
            <?php
        }
        ?>
    </select>
  </div>
</div>

This is how I pass the data to the Modal:

$('.open-EditRow').click(function(){
   var areano = $(this).attr('data-areano');
   var area = $(this).attr('data-area');
   var centerno = $(this).attr('data-centerno');
   $('#myModal #areano').val(areano);
   $('#myModal #area').val(area);
   $('#myModal #center').val(centerno);
   $('#myModal').modal('show');
});

And the Select2 code:

function DemoSelect2(){
    $('#center').select2();
}

But Select2 is displaying incorrect selected value. It is displaying the first item generated by the query, instead of the selected value.

But upon clicking the Select2 dropdown, the selected item is highlighted correctly.

What seems to be the problem here? Any guidance will be appreciated.

Answer 1

The workaround I did for this, and it somehow worked is to first remove the if statement which was used to compare the data. So my option just looked like this:

<option value="<?php echo $f['center_no']; ?>"><?php echo $f['center']; ?></option>

And then I declared the selected value on the function DemoSelect2()

function DemoSelect2(){
    var centerno = $(this).attr('data-centerno');
    $('#center').select2("val", centerno);
}

Now, my Select2 dropdown looked like this:

Upon clicking the dropdown, it highlighted the correct selected value:

I don't know if this is the correct fix for this but, this worked for me.