Using Javascript to set a Asp:Dropdownlist

Question

I've tried various ways to set the dropdownlist to no avail. In developer tools I can see the selectedIndex change appropriately and I can see the option node changed from selected false to selected true . But when the popup modal opens, the dropdownlist displays the 1st option which is blank. If I close and reopen the popup it will display whatever I manually selected. How can i programmatically set the dropdownlist value?

Mark Up

   <%--Address Popup--%>
    <div id="location_modal" class="reveal-modal modal_location" data-reveal>
    <fieldset>
    <legend>Locations(Update/New)</legend>
      <div class="row">
        <div class="large-4 columns">
           <asp:Label ID="Label4" runat="server">Location:*</asp:Label>
           <asp:DropDownList ID="ddLocationNames" runat="server" class="input_ddllocationName"></asp:DropDownList>
       </div>

Js

    locationNameId = 'MainContent_lvAddresses_lblAddressLocation_' + g_index
    locationName = document.getElementById(locationNameId).innerHTML;

    var select = document.getElementById("MainContent_ddLocationNames");

    for (var i = 0; i <select.options.length; i++){
        if(select.options[i].innerHTML == locationName){
            //select.selectedIndex = i;
            //$(".input_ddllocationName").selectedIndex = i;
            select[i].selected = true;
            }
            else{
            select[i].selected = false;
            }
        }

Droplist id: MainContent_ddLocationNames

1. selected="selected" value="" 
2. value="1">TESTING            
3. value="2">TESTING AGAIN      
4. value="3">MY FAVORITE LOCATION 
5. value="4">MGM GRAND BALLROOM A

Answer 1

If you have jQuery on the page:

$(".input_ddllocationName").val(locationName);

Or locationNameId, depending on which is the value attribute for the options.

Answer 2

If you are using core JavaScript, then this should work.

locationName = document.getElementById(locationNameId).innerHTML;

var select = document.getElementByClassName("input_ddllocationName")[0];

for (var i = 0; i <select.options.length; i++){
    if(select.options[i].innerHTML == locationName){
        select.selectedIndex = i;
        // OR select.value = select.options[i].value;
    }
    else{
        select[i].selected = false;
    }
}

Answer 3

Because of the foundation, the dropdownlist has some 'special' markup.

In the Js I had to add some extra lines of code. Thank You Google Dev Tools!

//Find out which row should be selected
var indexSave = 0;
for (var i = 0; i<select.options.length; i++){
    if(select.options[i].innerHTML == locationName){
        indexSave = i;
        break;
        }
    }

   //Set the current node to the Location Name
   $('#MainContent_ddlLocationName').next().children().first().text(locationName);

   //Remove all selections
    $('.input_ddlLocationName ul li').each(function() {
        $(this).removeClass("selected");
    });

    //Select the Location Name based on index
    var selectLi = indexSave + 1;
    $('.input_ddlLocationName ul li:nth-child(' + selectLi + ')').addClass("selected");