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使用索引即可附后：

$('#select_handle option:eq(1)').prop('selected', true)

（这会选择第二个选项）

见下面的演示：

var html = '<select>'+
             '<option value="10">10</option>'+
             '<option value="20">20</option>'+
            '</select>';
$('#select_handle').append(html);
$('#select_handle option:eq(1)').prop('selected', true);

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

Answer 3

您可以尝试将下拉菜单的值设置为您想要“选择”的值 - 例如 $("#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>

Answer 4

选定=＆＃34;选择＆＃34;会工作

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

            $('#select_handle').append(html);

Answer 5

您可以使用.attr()函数和nth伪选择器在 jQuery 中执行此操作。

像这样：

$("option:nth-child(1)").attr("selected", "");

希望它有所帮助！： - ）

Answer 6

在追加后，尝试$('#select_handle select').val("10");或20或您想要选择的任何值

如何使用jQuery以编程方式在变量内选择一个选项

6 个答案: