动态添加到 select 的选项不可见

Question

我正在尝试向空 select 添加选项。
问题是当我使用 jQuery 或 javascript 添加选项时，添加的选项没有出现我试图调试添加选项的函数，它实际上是将它添加到 html但是我在网站上看不到它

select :

<select class="selectpicker"  id="partners_id">
</select>

jquery :

$("#partners_id").append(('<option>', {
    value:1,
    text:'One'
}))

Answer 1

试试这个。您忘记在 append 函数中添加 $ 。

 $(document).ready(function(){
    $("#partners_id").append($('<option>', {
        value:1,
        text:'One'
    }))
})

使用按钮点击追加

$(document).ready(function(){
    $( "#btn" ).click(function() {
        $("#partners_id").append($('<option>', {
            value:1,
            text:'One'
        }))
    });
})

Answer 2

尝试在 html 中添加一个根选项，然后使用 append() 方法：

<select class="selectpicker"  id="partners_id">
   <option value="-">Root</option>
</select>

The .append() method inserts the specified content as the last child of each element in the jQuery collection

添加最后一个

 $("#partners_id").append("<option value='1'>One</option>");

或

 $("#partners_id").append(
        $('<option></option>').val(1).html("one")
    );

或首先添加，使用prepend()

The .prepend() method inserts the specified content as the first child of each element in the jQuery collection

 $("#partners_id").prepend(
            $('<option></option>').val(1).html("one")
        );

演示：http://jsfiddle.net/w7cgmy12/

动态添加到 select 的选项不可见

dynamically added option to select is invisible

html

jquery

bootstrap-select