asp.net mvc, jquery dialog + select + getJson (different results in ff, ie and chrome)

Question

Hi everybody.

i'm using jquery 1.3.2, and have a problem in situatsuin where i fill select via getJson

html :

<div id="dialDiv">
    <select id="select_elem" name="select_elem" style="font-size: 1.4em; line-height: 1em; font-weight: bold; color: #333;">
    <input type="button" name="lock" id="lock" value="Lock" onclick="LockTime();" />
</div>

javascript :

// fills select_elem via getJson

function ShowDial(){

     $.getJSON('GetFreeTimeSlots',{hour:4},function(data)
        {
            $.each(data, function() 
            {
                $("#select_elem").append("<option value='"+this.Value+"'>" + this.Value + "</option>");
            });
        }

     $("dialDiv").dialog(.......).show();

}

inside this dialDiv there is a button with onClick event :

 function LockTime() {
      alert($("#select_elem").val());
    }

in IE this alert shows selected item value, in chrome it shows "undefined", and in ff it shows first option in select, so it works correctly only in ie =/

is there any way to fix this ?

Thank You !

Answer 1

try

var sel_val = $("#select_elem option:selected");
    alert(sel_val.val());

recommendation for better coding

$.each(data, function(i,v){
   $('<option>').val(v).text(v).appendTo("#select_elem")
});

Answer 2

The problem concerned with absence explicit specifying selected item. And other point - is just recommendation - instead of text presentation use DOM construction, so:

function(){
   var oOption = document.createElement("OPTION");
   oOption.text=this.Value;
   oOption.value=this.Value;
   if( some_criteria )//add criteria to select
       oOption.selected = true;
   $("#select_elem").add(oOption);
}