如何使用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 ，就使用索引 ：

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

selected =“selected”將起作用

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或您想要選擇的任何值