克隆项目时选择不起作用

Question

我的网站上有一个按钮，可以克隆一些文本框，并允许用户在预订时添加多个访客。

我有3个文本框，第四个是选择选项。出于某种原因，当我运行函数NewMenuItem()时，select选项对newitem不起作用，但原始版本确实有效。 select选项刚冻结（显示一个选项），但不允许您单击下拉列表。

我有一种感觉，就是选择这个班级 - 选择＆＃34;。

＆＃13;

＆＃13;

/*----------------------------------------------------*/
/*  Chosen Plugin
/*----------------------------------------------------*/

var config = {
  '.chosen-select'           : {disable_search_threshold: 10, width:"100%"},
  '.chosen-select-deselect'  : {allow_single_deselect:true, width:"100%"},
  '.chosen-select-no-single' : {disable_search_threshold:100, width:"100%"},
  '.chosen-select-no-single.no-search' : {disable_search_threshold:10, width:"100%"},
  '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
  '.chosen-select-width'     : {width:"95%"}
};

for (var selector in config) {
   	if (config.hasOwnProperty(selector)) {
      $(selector).chosen(config[selector]);
  	}
}


/*----------------------------------------------------*/
/* Guest List
/*----------------------------------------------------*/
function newMenuItem() {
  var newElem = $('tr.pricing-list-item.pattern').first().clone();
  newElem.find('input').val('');
  newElem.appendTo('table#pricing-list-container');
}

if ($("table#pricing-list-container").is('*')) {
  $('.add-pricing-list-item').on('click', function(e) {
    e.preventDefault();
    newMenuItem();
  });

  // remove ingredient
  $(document).on("click", "#pricing-list-container .delete", function(e) {
    e.preventDefault();
    $(this).parent().parent().remove();
  });

  // add submenu
  $('.add-pricing-submenu').on('click', function(e) {
    e.preventDefault();

    var newElem = $('' +
      '<tr class="pricing-list-item pricing-submenu">' +
      '<td>' +
      '<div class="fm-move"><i class="sl sl-icon-cursor-move"></i></div>' +
      '<div class="fm-input"><input type="text" placeholder="Category Title" /></div>' +
      '<div class="fm-close"><a class="delete" href="#"><i class="fa fa-remove"></i></a></div>' +
      '</td>' +
      '</tr>');

    newElem.appendTo('table#pricing-list-container');
  });


}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="pricing-list-container">
  <tr class="pricing-list-item pattern">
    <td>

      <div class="fm-input pricing-name">
        <label>Full Name</label>
        <input type="text" value=""></div>
      <div class="fm-input pricing-name">
        <label>Email Address</label>
        <input type="text" value=""></div>
      <div class="fm-input pricing-name">
        <label>Phone Number</label>
        <input type="text" value=""></div>

      <div class="fm-input pricing-name">
        <label>Package</label>
        <select data-placeholder="Select Item" class="chosen-select" id="packages[]">
    <option>Select a package </option>
    
    <option value = "">Package1 </option>
    <option value = "">Package2 </option>
    </select></div>



      <div class="fm-close"><a class="delete" href="#"><i class="fa fa-remove"></i></a></div>
    </td>
  </tr>
</table>
<a href="#" class="button add-pricing-list-item">Add Guest</a>

＆＃13;

＆＃13;

＆＃13;