Установка нескольких вариантов с помощью выбранного плагина jquery

Я использую плагин selected для выбора нескольких элементов из данных, загруженных из базы данных. Это сохранено, и затем я, возможно, захочу снова загрузить эти варианты (на самом деле всю форму), чтобы отредактировать его и сохранить изменения.

Я могу успешно прочитать различные варианты выбора из компонента select следующим образом:

$("#meet_participants").chosen().val();

Однако, если я хочу установить несколько вариантов, я пробую этот тестовый пример:

HTML-код:

<div class="row">
  <div class="form-group">
    <label class="control-label">Participantes</label><br>
    <b>
    <select data-placeholder="Ingrese los nombres" class="chosen-select form-control" style="width:60%" multiple id="meet_participants">
    <!--Filled with all db users.-->
    <option>hola</option>
    <option>mundo</option>
    <option>cruel</option>
    <option>como</option>
    <option>estas</option>
    </select>
    </b>
    <button class="btn btn-primary"><b>Tareas pendientes</b></button>
  </div> <!--formgroup-->
</div> <!--row-->

После этого я делаю (согласно примеру)

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/plugins/jquery-1.11.1.min.js"></script>
<script src="js/plugins/bootstrap.min.js"></script>  
<script src="js/plugins/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
  var config = {
'.chosen-select'           : {},
'.chosen-select-deselect'  : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
  }
  for (var selector in config) {
$(selector).chosen(config[selector]);
  }
</script>


<script>
  fillMemoForm();
  $("#meet_participants").chosen().val(["hola", "mundo", "cruel"]);
</script>

Важна только последняя строчка, однако на всякий случай вставил все. Насколько я понимаю, это должно было установить выбранные значения для этих трех элементов, но этого не произошло. Что я делаю не так?


jquery jquery-chosen
person aarelovich    schedule 29.10.2014    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Лучшим решением для этого вместо уничтожения и воссоздания элемента dom было бы

$('#meet_participants').val(["hola","mundo","cruel"]).trigger('chosen:updated');
person Sercan Ozdemir    schedule 05.11.2016

arrow_upward
2
arrow_downward

Val в выбранном плагине не обновляет элемент управления. Вызовите уничтожить, вот так вместо этого

$('#meet_participants').chosen('destroy').val(["hola","mundo","cruel"]).chosen();


$('#meet_participants').chosen();

$('#btn1').click(function() {
  $('#meet_participants').chosen('destroy').val(["hola", "mundo", "cruel"]).chosen();
});

$('#btn2').click(function() {
  $('#meet_participants').chosen('destroy').val(["estas", "como"]).chosen();
});
body {
  padding: .5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />

<form role="form">
  <div class="form-group">
    <select data-placeholder="Ingrese los nombres" class="chosen-select form-control" multiple id="meet_participants" style="width:50%">
      <option>hola</option>
      <option>mundo</option>
      <option>cruel</option>
      <option>como</option>
      <option>estas</option>
    </select>
  </div>

  <div class="form-group">
    <button id="btn1" class="btn">set ["hola", "mundo", "cruel"]</button>
  </div>
  <div class="form-group">
    <button id="btn2" class="btn">set ["estas", "como"]</button>
  </div>

</form>

person cforcloud    schedule 29.10.2014