gpt4 book ai didi

jquery - 不错的选择不工作追加追加

转载 作者:行者123 更新时间:2023-12-04 03:49:28 24 4
gpt4 key购买 nike

我的项目有一个按钮,可以在我的项目中使用 jqueryniceselect 在页面中追加选择选项,但是当我的选择选项是追加 niceselect 时,这个选择选项会更新和刷新 niceselect,但不起作用。

  $(document).ready(function() {
$('select').niceSelect();
});




function outputrecord() {

str='';
str +='<select class="nicslc" >';
str +='<option data-display="Select">Nothing</option>';
str +='<option value="1">Some option</option>';
str +='</select>';


return str;


$(".nicslc").niceSelect('update');
$(".nicslc").niceSelect('refresh');
}
<select>
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>

我的追加按钮代码

 $('.passengers-info-box').append(outputrecord());

直播example

最佳答案

在你的代码中 update 只会更新以反射(reflect)对已经存在的选择所做的任何更改,但是,在这里你正在创建全新的选择框而不是更新前一个选择框。所以,你需要也可以使用 $('select').niceSelect(); 对其进行初始化。

演示代码:

$('select').niceSelect();

$('button').on('click', function() {
const newOption = ` <select>
<option value="test">test</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="test4">test4</option>
</select>`;

$('.select-block').append(newOption);
$('select').niceSelect('destroy'); //destroy the plugin
$('select').niceSelect(); //apply again
});
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css">
</head>

<body>
<div class="select-block">
<select>
<option value="test">test</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="test4">test4</option>
</select>
</div>

<div class="button-block">
<button>Add Element</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.js"></script>
</body>

</html>

关于jquery - 不错的选择不工作追加追加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64627991/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com