选中框中的选项已选中但未显示该值

时间:2014-04-06 09:40:27

标签: javascript jquery-mobile drop-down-menu option selected

更新解决方案:

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

我在html页面中有一个这样的选择框

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

此代码从db获取类并附加到选择框:

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');
}

从数据库中检索选择框的选项。我可以正常地做出所有选择。但是,我有一个这样的javascript函数,它从数据库中检索一个类,然后在所选的框中选中它。在我尝试选择该类之后,我再次检查了html页面。我可以看到已经检查了类(它有&#34;检查&#34;符号旁边的符号),但是选择框没有显示该选定选项的值。你有什么想要拥有我吗?

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');

让我们看一下代码$("#class").val(classDeadline);

已检查过:http://i.imgur.com/h7yw8k9.png  但是没有显示任何价值:http://i.imgur.com/uDWP0lc.png

1 个答案:

答案 0 :(得分:0)

此处的问题是未设置选定状态或在选择框中添加新选项。

将所选属性设置为选项后,jQ Mobile需要刷新选择框才能正确显示。

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

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

  • 请尝试将var classDeadline = deadline.class;更改为var classDeadline = deadline.myclass;。 “class”是ECMAScipt保留字。

  • 在将值分配给dom元素classDeadline之前,请检查$("#class").val(classDeadline);中是否有值。使用console.log(classDeadline)alert(classDeadline)