我正在使用bootstrap-select，并且我有一組輸入，用戶可以根據(jù)需要添加它，但只有第一個(gè)選擇框可以與插件一起正常運(yùn)行，但其他輸入則不能HTML 代碼：<div id="products-color"> <div class="form-group"> <select class="selectpicker" data-live-search="true" name="color_id" style="width:100%"> @foreach($colors as $color) <option value="{{ $color->id }}">{{ $color->name }}</option> @endforeach </select> </div></div><button type="button" class="btn btn-tiffany" onclick="addColorOption()">Add New </button>js代碼： function addColorOption() { var color = ` <div class="form-group"> <select class="selectpicker" data-live-search="true" name="color_id" style="width:100%"> @foreach($colors as $color) <option value="{{ $color->id }}">{{ $color->name }}</option> @endforeach </select> </div> `; $('#products-color').append(color);}引導(dǎo)選擇插件：$('.selectpicker').selectpicker();這意味著只有第一個(gè)選擇框與插件一起運(yùn)行，但是當(dāng)我通過add new按鈕添加新的選擇框時(shí)，插件不起作用
3 回答
翻過高山走不出你
TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超3個(gè)贊
您需要將$('.selectpicker').selectpicker();其作為方法的最后一行addColorOptions來(lái)初始化新添加的選擇。
當(dāng)我們動(dòng)態(tài)添加時(shí)bootstrap-select，我們需要在創(chuàng)建它們后初始化它們。
HUWWW
TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊
當(dāng)一切工作正常并且只是動(dòng)態(tài)添加選擇輸入時(shí)，未按預(yù)期呈現(xiàn)
function addColorOption() {
var color = `
<div class="form-group">
<select class="selectpicker" data-live-search="true" name="color_id" style="width:100%">
@foreach($colors as $color)
<option value="{{ $color->id }}">{{ $color->name }}</option>
@endforeach
</select>
</div>
`;
$('#products-color').append(color);
$('.selectpicker').selectpicker(); //just adding it here will do
}
``
拉丁的傳說(shuō)
TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊
select生成的元素應(yīng)該addColorOption()每個(gè)都有一個(gè)唯一的name值，與原始元素不同。您可以根據(jù)每次現(xiàn)有選擇的數(shù)量生成一個(gè)數(shù)字，并將其附加到新元素的名稱中。
- 3 回答
- 0 關(guān)注
- 158 瀏覽
添加回答
舉報(bào)
0/150
提交
取消