不错 select 无法使用 append append

Question

我的项目有一个按钮，它在我的项目中使用 jqueryniceselect 在页面 im 中附加 select 选项，但是当我的 select 选项附加 niceselect 时不起作用这个 select 选项即时更新和刷新很好select 但不起作用。

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

我附加的 btn 代码

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

直播example

Answer 1

在您的代码中 update 只会更新以反映对已经存在的 select 所做的任何更改，但是，在这里您正在创建全新的 select-box 而不是更新前一个.因此，您还需要使用 $('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>

不错 select 无法使用 append append

nice select not working append with append

jquery

append