Question

我正在使用输入中的一些代码将项添加到jquery chosen选项，这样就行了。但是，我需要做的是，一旦用户将它们添加到列表中，他们就会选择它们，而不必使用下拉列表来选择它们。这个插件可以实现吗？

非常感谢

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无法正常工作。您只需在添加新selected

时设置option属性

＆＃13;

$("#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('');
});

＆＃13;

#box_ni {
  width: 200px;
}

#add {
  display: block;
  color: blue;
}

＆＃13;

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

＆＃13;

添加要选择的项目并在输入时选择它们

1 个答案: