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

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

您需要添加这行代码，将“selected”属性添加到所选选项:

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

这是 fiddle 的完整代码:

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>
}