Question

在以下代码中，未显示所选选项（fiddle）：

var options = ["option1", "option2", "option3"]
var $select = $("<select></select>");

$.each(options, function(index, value) {
   var $option = $("<option></option>", {
     "text": value,
     "value": value
   });
   $select.append($option);
});
$select.val("option3");
$('#dropdown').append($select.prop("outerHTML")); // 'dropdown' is an id of a div

现在，如果我愿意的话，它会起作用：append($select)，但我需要使用outerHTML。如何设置select元素的值，使其在outerHTML？

中受到影响

Answer 1

以下是updated fiddle.

问题在于您选择下拉列表的值为：

$select.val("option3");

你需要放置这行代码，添加＆＃34;选择＆＃34;属于所选选项：

$select.find("option:selected").attr('selected', true);

以下是小提琴的完整代码：

<强> JS：

$(document).ready(function() {
    BuildDropdown();
});

function BuildDropdown()
{
   var options = ["option1", "option2", "option3"]
   var $select = $("<select></select>");

   $.each(options, function(index, value) {
      var $option = $("<option></option>", {
        "text": value,
        "value": value,
        //"id": value
      });
      $select.append($option);
    });
    $select.val("option3");
    $select.find("option:selected").attr('selected', true);//adds "selected" attribute to the selected option
    $('#dropdown').append($select.prop("outerHTML"));

    console.log($select.prop("outerHTML"));// will output: <select><option value="option1">option1</option><option value="option2">option2</option><option value="option3" selected="selected">option3</option></select>
}

设置动态构建的选择选项的值并在outerHTML中应用更改

1 个答案: