option in select box is checked but not show the value

Question

Update solution:

var selectClass = $("#class"); 
$("#class").val(classDeadline);
selectClass.selectmenu("refresh");

I have a select box like this in html page

<select id="class" class="ui-selectmenu" >
</select>

this code to get classes from db and append to select box:

function getClasses(tx){
  //alert('classes');
  var sql = "select * from classes";
  tx.executeSql(sql, [] , getClasses_success);
}

function getClasses_success(tx, results){
  var len = results.rows.length;
  //alert('len: ' + len);
  //var s = "";
  for (var i=0; i<len; i++){
      var classDB = results.rows.item(i);
      $('#class').append('<option value="'+ classDB.name + '">'+ classDB.name +'</option>');
  }
    ////alert('before append');
}

the options of select box is retrieved from database. I can make all of the options normally. However, I have a javascript function like this which retrieve a class from database and then make it selected in the selected box. After I tried to make that class to be selected, I checked the html page again. I could see that the class was checked already ( it has the "check" symbol next to value) but the select box doesn't show the value of that selected option. Do you have any idea to have me ?

var len = results.rows.length;
//var s = "";
for (var i=0; i<len; i++){
    var deadline = results.rows.item(i);
    var description = deadline.description;
    var classDeadline = deadline.class;
    var duedate = deadline.duedate;
    var duetime = deadline.duetime;
    var type = deadline.type;
    var additionalInfo = deadline.additionalInfo;
    var finished = deadline.finished;

    document.getElementById("shortDescription").value = description;
    document.getElementById("dueDate").value = duedate;
    document.getElementById("dueTime").value = duetime;
    document.getElementById("additionalInfo").value = additionalInfo;
    $("#class").val(classDeadline);
    document.getElementById("type").selected = type;
    document.getElementById("finished").selected = finished;


}
    //alert('before append');

Let's take a look at the code $("#class").val(classDeadline);

Checked already: http://i.imgur.com/h7yw8k9.png But doesn't show any value: http://i.imgur.com/uDWP0lc.png

Answer 1

The problem here was not setting the selected state or appending a new option to the select box.

After setting the selected attribute to an option, jQ Mobile needs a refresh of the selectbox to display it correctly. .

var myselect = $("#class"); 
myselect[0].selectedIndex = 'HCI'; 
myselect.selectmenu("refresh");

---

jsFiddle http://jsfiddle.net/pWgJ7/1/

• please try to change var classDeadline = deadline.class; to var classDeadline = deadline.myclass; . "class" is an ECMAScipt reserved word.

• check that you have a value in classDeadline , before you assign the value to the dom element $("#class").val(classDeadline); . Use console.log(classDeadline) or alert(classDeadline) .