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

Question

假设我有这个变量 html，其中包含这些 select 选项：

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

我如何以编程方式 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

selected="selected" 有效

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

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

Answer 2

默认情况下，将选择第一个选项 - 如果您想对任何其他设置进行设置，请使用 index 作为附加 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

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

这是一个简单的 jQuery 插件 select 一个索引选项。

(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 4

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

像这样：

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

希望对您有所帮助！ :-)

Answer 5

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

Answer 6

您可以尝试简单地将下拉列表的值设置为您希望 'select' 的值 - 比如 $("#select_handle select").val( a_value );

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

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

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

How to programmatically select an option inside a variable using jQuery

html

javascript

jquery

jquery-selectors