将项目添加到选择项并在输入时选择它们

Question

我正在使用输入中的一些代码将项目添加到 jquery chosen select 并且这工作正常。但是，我需要做的是，一旦用户将它们添加到列表中，它们就会 selected 而不必使用下拉列表来 select 它们。这个插件可以吗？

非常感谢

js

$(function() {
   $("#box_ni").chosen({});
   $(function() {
        $(document).on('click', '#add', function() {
            value2 = $("#box_input").val();
            $("#box_ni").attr("data-placeholder", "Select boxes for intake... ");
            $("#box_ni").append("<option>"+value2+"</option>");
            $("#box_ni").trigger("chosen:updated");
            $("#box_input").val('');
    });
});

html

<div class="form-group">
    <label class="labelStyle" for="box_ni">Select Your Box(es)</label> <select class="form-control chosen-select" data-placeholder="No new intake to display..." disabled id="box_ni" multiple name="box_ni[]">
      <option value="">
      </option>
    </select>
    <div id="nidstrmessage"></div>
    <div class="servicesHelp">
      Just some example blurb.
    </div>
    <div class="noBrtvBoxes" style="color:white;"></div>
</div>

Answer 1

你可以这样做，但在我解释如何之前，请注意你 disabled select option，chosen 不起作用。您只需要在添加新的 option

时设置 selected 属性

$("#box_ni").chosen({
  max_selected_options: 3
});

$(document).on('click', '#add', function() {
  value2 = $("#box_input").val();
  $("#box_ni").attr("data-placeholder", "Select boxes for intake... ");
  $("#box_ni").append("<option selected>" + value2 + "</option>");
  $("#box_ni").trigger("chosen:updated");
  $("#box_input").val('');
});

#box_ni {
  width: 200px;
}

#add {
  display: block;
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.min.css" />

<div class="form-group">
  <label class="labelStyle" for="box_ni">Select Your Box(es)</label>

  <select class="form-control chosen-select" data-placeholder="No new intake to display..." id="box_ni" multiple name="box_ni[]">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>

  <div id="nidstrmessage"></div>
  <div class="servicesHelp">
    Just some example blurb.
  </div>
  <div class="noBrtvBoxes" style="color:white;"></div>
</div>
<input id="box_input" type="text" value="bingo" />
<a id="add">Click Me!</a>

将项目添加到选择项并在输入时选择它们

Add items to chosen and have them selected on entry

javascript

jquery

jquery-chosen