javascript - 如何使用 jQuery 以编程方式选择变量内的选项

Question

假设我有这个包含这些选择选项的变量 html:

var html = '<select>'+
             '<option value="10">10</option>'+
             '<option value="20">20</option>'+
            '</select>';

我如何以编程方式选择一个位于 html 变量内的选项，以便当我将它们附加到某个地方时，例如

$(this).children('div').append(html);

会变成这样:

<div> <!-- children div of the current scope -->
  <select>
    <option value="10" selected>10</option>
    <option value="20">20</option>
  </select>
</div>

这怎么可能？

---

编辑:变量内容是从远程位置生成的，我必须在将其附加到 div 之前在本地更改值。因此，问题。

编辑 2:抱歉造成混淆，问题已根据我的真实情况进行了更新。

Answer 1

您可以将 HTML 转换为 jQuery 元素并选择索引 0 处的值。然后您可以将其添加到 DOM。

这是一个简单的 jQuery 插件，可以通过索引选择一个选项。

(function($) {
  $.fn.selectOptionByIndex = function(index) {
    this.find('option:eq(' + index  + ')').prop('selected', true);
    return this;
  };
  $.fn.selectOptionByValue = function(value) {
    return this.val(value);
  };
  $.fn.selectOptionByText = function(text) {
    this.find('option').each(function() {
      $(this).attr('selected', $(this).text() == text);                                 
    });
    return this;
  };
})(jQuery);

var $html = $([
  '<select>',
    '<option value="10">10</option>',
    '<option value="20">20</option>',
  '</select>'
].join(''));

$('#select-handle').append($html.selectOptionByIndex(0));
// or
$html.selectOptionByValue(10);
// or
$html.selectOptionByText('10');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select-handle"></div>