nice select not working append with append

user_4921015 0
Viewed 1272

My project has a button that append select option in page im using jqueryniceselect in my project but When my select option is append niceselect not work this select option im update and refresh niceselect but not work.

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

my append btn code

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

for live example

append jquery
1 Answers

In your code update will only update to reflect any changes made to the select which is already present but , here you are creating entirely new select-box not updating the previous one .So, you need to initialize it as well using $('select').niceSelect(); .

Demo Code :

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

user_106064000
Related