如何使用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>

Answer 2

您可以尝试简单地将下拉列表的值设置为您想要“选择”的值 - 就像 $("#select_handle select").val( a_value );

例如，如果a_value是 30，它将添加所需的 HTML 到 DOM 节点。这是我的看法：

$(function() {
  var html = '<select>' +
      '<option value="10">10</option>' +
      '<option value="20">20</option>' +
      '<option value="30">30</option>' +
      '<option value="40">40</option>' +
      '<option value="50">50</option>' +
    '</select>';

  // set a value; must match a 'value' from the select or it will be ignored
  var a_value = 30; 

  // append select HTML
  $('#select_handle').append(html);

  // set a value; must match a 'value' from the select or it will be ignored
  $("#select_handle select").val(a_value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>select added below</h2>
<div id="select_handle">
</div>