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

这是 updated fiddle.

问题是,在选择下拉列表的值后:

$select.val("option3");

你需要把这行代码, 将“选定”属性添加到选定选项 :

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

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