JavaScript 中下拉菜单的默认值

Question

我在 Bootstrap 中使用 JavaScript 作为可编辑表。其中三列由下拉值决定。当这些值被“保存”时，它们会被转换为正确的文本值，但是当它们返回编辑时，我无法将它们保存的下拉选项保持为“默认值”。

例如： 他们在下拉菜单中输入“3”并保存。如果他们想返回并编辑（可能是表格中的另一个字段），曾经保持 3 的下拉菜单现在会恢复为默认值 1。

这是我的编辑代码：

function Edit() { 
    var par = $(this).parent().parent(); //tr 
    var tdDate = par.children("td:nth-child(1)"); 
    var tdCellNum = par.children('td:nth-child(2)');
    var tdButtons = par.children("td:nth-child(3)");                 
    tdDate.html("<input type='date' id='txtDate' value='"+tdDate.html()+"'/>"); 
    tdCellNum.html("<select id='txtCellNum'><option value=1>1</option>
    <option value=2>2</option><option value=3>3</option></select>");
    tdButtons.html("<img src='save.png' class='btnSave'/>"); 

知道如何从tdCellNum 获取值以在下拉列表中显示为默认值吗？

我尝试设置 select =tdCellNum and tdCellNum.val 的值并使用 Number 将对象转换为数字。我还尝试使用其余变量设置 var=tdCellNum，然后设置 document.getElementById("tdCellNum").value=copyValue.html(); 和 @987654326 @但一切都无济于事。有什么想法吗？谢谢！

Answer 1

最好创建元素并附加它。这样您就可以使用 .val() 来选择选项。

var sel = $("<select id='txtCellNum'><option value=1>1</option><option value=2>2</option><option value=3>3</option></select>");
sel.val(tdCellNum.text());
tdCellNum.empty().append(sel);

Answer 2

您可以使用tdCellNum.text() 来获取字段中的值。

那么你可以这样做：

tdCellNumInt=tdCellNum.text();
tdCellNum.html("<select id='txtCellNum'><option value=1>1</option> <option value=2>2</option><option value=3>3</option></select>");
tdCellNum.find("option[value='"+tdCellNumInt+"']").prop("selected",true);