对jQuery select元素的更改未反映在innerHTML/outerHTML上

Question

基本上，我必须创建一个select元素，选择一个选项，然后获得它的字符串表示，包括所选选项，如下所示：

<option value="2" selected>two</option>

我已经尝试调用下面注释掉的几个函数，虽然它们都会更改selectedOptions和value字段，但在元素的innerHTML或outerHTML中看不到这种更改。

var select = '<select><option value="1">one</option><option value="2">two</option><option value="3">three</option></select>';
function render() {
  var sel = $(select);
  //sel.attr('value', '2');
  //sel.prop('value', '2');
  //sel.val('2');
  	
  return sel[0].outerHTML;
}
  
console.log(render());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

Answer 1

您需要将selected属性分配给相应的项：

var select = '<select><option value="1">one</option><option value="2">two</option><option value="3">three</option></select>';
function render() {
  var sel = $(select);
  sel.find("option[value=2]").attr('selected', 'selected');
  return sel[0].outerHTML;
}
console.log(render());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>