@{
    ViewData["Title"] = "DropWithImage";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>DropWithImage</h1>
@using WebApplication6.Data       //ImageOption class reference
@{
    var ddloptins = (List<ImageOption>) ViewBag.DDLOptions;
} 

<select id="country" name="country" class="form-control vodiapicker">
    <option value="" data-thumbnail="/images/480px-NYCS-bull-trans-B.svg.png">Select Country</option>
    @foreach(var item in ddloptins)
    {
        <option value="@item.Value" data-thumbnail="@item.ImageIcon">@item.Text</option>
    } 
</select>
<div class="lang-select">
    <button class="btn-select" value=""></button>
    <div class="b">
        <ul id="a"></ul>
    </div>
</div>
@section Scripts{
    <style type="text/css">
    .vodiapicker{
      display: none; 
    }

    #a{
      padding-left: 0px;
    }

    #a img, .btn-select img{
      width: 12px;
  
    }

    #a li{
      list-style: none;
      padding-top: 5px;
      padding-bottom: 5px;
    }

    #a li:hover{
     background-color: #F4F3F3;
    }

    #a li img{
      margin: 5px;
    }

    #a li span, .btn-select li span{
      margin-left: 30px;
    }

    /* item list */

    .b{
      display: none;
      width: 100%;
      max-width: 350px;
      box-shadow: 0 6px 12px rgba(0,0,0,.175);
      border: 1px solid rgba(0,0,0,.15);
      border-radius: 5px;
  
    }

    .open{
      display: show !important;
    }

    .btn-select{
      margin-top: 10px;
      width: 100%;
      max-width: 350px;
      height: 34px;
      border-radius: 5px;
      background-color: #fff;
      border: 1px solid #ccc;
 
    }
    .btn-select li{
      list-style: none;
      float: left;
      padding-bottom: 0px;
    }

    .btn-select:hover li{
      margin-left: 0px;
    }

    .btn-select:hover{
      background-color: #F4F3F3;
      border: 1px solid transparent;
      box-shadow: inset 0 0px 0px 1px #ccc;
  
  
    }

    .btn-select:focus{
       outline:none;
    }

    .lang-select{
      margin-left: 50px;
    }

</style>
    <script>
        $(function(){
                //test for getting url value from attr
        // var img1 = $('.test').attr("data-thumbnail");
        // console.log(img1);

        //test for iterating over child elements
        var langArray = [];
        $('.vodiapicker option').each(function(){
          var img = $(this).attr("data-thumbnail");
          var text = this.innerText;
          var value = $(this).val();
          var item = '<li><img src="'+ img +'" alt="" value="'+value+'"/><span>'+ text +'</span></li>';
          langArray.push(item);
        })

        $('#a').html(langArray);

        //Set the button value to the first el of the array
        $('.btn-select').html(langArray[0]);
        $('.btn-select').attr('value', 'en');

        //change button stuff on click
        $('#a li').click(function(){
           var img = $(this).find('img').attr("src");
           var value = $(this).find('img').attr('value');
           var text = this.innerText;
           var item = '<li><img src="'+ img +'" alt="" /><span>'+ text +'</span></li>';
          $('.btn-select').html(item);
          $('.btn-select').attr('value', value);
          $(".b").toggle();
          //console.log(value);
        });

        $(".btn-select").click(function(){
                $(".b").toggle();
            });

        //check local storage for the lang
        var sessionLang = localStorage.getItem('lang');
        if (sessionLang){
          //find an item with value of sessionLang
          var langIndex = langArray.indexOf(sessionLang);
          $('.btn-select').html(langArray[langIndex]);
          $('.btn-select').attr('value', sessionLang);
        } else {
           var langIndex = langArray.indexOf('ch');
          console.log(langIndex);
          $('.btn-select').html(langArray[langIndex]);
          //$('.btn-select').attr('value', 'en');
        } 
        });
</script>
}