我正在使用bootstrap-select，并且我有一組輸入，用戶可以根據需要添加它，但只有第一個選擇框可以與插件一起正常運行，但其他輸入則不能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);}引導選擇插件：$('.selectpicker').selectpicker();這意味著只有第一個選擇框與插件一起運行，但是當我通過add new按鈕添加新的選擇框時，插件不起作用
3 回答
翻過高山走不出你
TA貢獻1875條經驗 獲得超3個贊
您需要將$('.selectpicker').selectpicker();其作為方法的最后一行addColorOptions來初始化新添加的選擇。
當我們動態添加時bootstrap-select，我們需要在創建它們后初始化它們。
HUWWW
TA貢獻1874條經驗 獲得超12個贊
當一切工作正常并且只是動態添加選擇輸入時，未按預期呈現
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
}
``
拉丁的傳說
TA貢獻1789條經驗 獲得超8個贊
select生成的元素應該addColorOption()每個都有一個唯一的name值，與原始元素不同。您可以根據每次現有選擇的數量生成一個數字，并將其附加到新元素的名稱中。
- 3 回答
- 0 關注
- 147 瀏覽
添加回答
舉報
0/150
提交
取消