xml jquery, dropdown issue

When the fnGetBondNameList is called, the selected <option> is always dropped into the last one of the dropdown list.
How can I make it just select the first option in the dropdown?

function fnGetBondNameList(bondState) {
            $.ajax({
                url: "http://localhost:5489/BondList.xml",
                success: function (xml) {
                    parseSelectXML(xml,"bondName","Bond",bondState);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Status: " + xhr.status);
                    alert("Error: " + thrownError);
                }
            });
    }
function parseSelectXML(xml, selectid, xmlnode, bondState) {
    var selecthtml = "", selectBondName="";
    var i = 0;
    $(xml).find(xmlnode).each(function () {
                if (bondState == $(this).find('GeneralInformation').find('State').text()) {
                    selectBondName = $(this).find('GeneralInformation').find('Name').text();
                    selecthtml += '<option value="' + selectBondName + '">' + selectBondName + "(" + bondState + ") "  + '</option>';
                    i = i + 1;
                  //  alert(selecthtml);
                }
    });
             $("#" + selectid).prop("disabled", false);
             $('#' + selectid).html(selecthtml).val(selectBondName);
             //modal information
             $('#' + "bondListFilterByState").html(selecthtml).val(selectBondName);
             $('#' + "bondlistFilterByState_selectedBondName").html(selectBondName).val;
             $('#' + "bondlistFilterByState_selectedState").html(bondState).val;
             //modal end information
         } 


<select class="select2" 
                                        id="bondState" 
                                        name="bondState" 
                                        onchange="fnSaveSingleData(this.name, '0'); fnGetBondNameList(this.options[this.selectedIndex].value);" 
                                        data-placeholder="Choose Bond State...">
                                        <option value=""></option>
                                     @foreach (var item in Model.stateList)
                                    {
                                        <option value=@item>@item</option>
                                    }
                                </select>

   <select data-placeholder="Choose Bond.." class="select2" disabled required onchange="fnSaveSingleData(this.name,'0');" id="bondName" name="bondName">
                                    <option value=""></option>
                                </select> 



<Surety>
  <SuretyLine>
    <Commercial>
      <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor 1</Name>
          <State ID="bondState" PrefillValue="Yes">CA</State>
       </GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
  <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor 2</Name>
          <State ID="bondState" PrefillValue="Yes">CA</State>
       </GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
            <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor asdfasd</Name>
          <State ID="bondState" PrefillValue="Yes">FL</State>
       </GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
</Commercial>
</SuretyLine>
</Surety>

Open in new window

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 52

Chris StanyonWebDevCommented: 2017-10-30

You could change your line 25 to select the first option instead of setting a val():

Instead of this:

$('#' + selectid).html(selecthtml).val(selectBondName);

You could try something like this:

$('#' + selectid).html(selecthtml);
$('#' + selectid + ' option:first').attr('selected', 'selected');

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

xml jquery, dropdown issue

Who is Participating?