选择 select - 将动态选项作为第一个选择选项注入
Chosen select - Inject dynamic option as first option to choose
我正在使用选择的 select 插件进行 select 渲染。现在,我想在呈现后将新选项添加到 select 中。尝试了以下代码。它呈现为最后一个选项。但是,我需要先渲染这个选项。无论如何我们可以让这成为可能吗?
$('#Country').append( new Option('USA',2) );
$('#Country').trigger("chosen:updated");
请试试这个对我有用的例子。
$('#second').prepend( new Option('USA',2) );
$(".chosen-select").chosen();
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<select id="second" data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
<option value="" disabled="">Select country</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
</select>
我正在使用选择的 select 插件进行 select 渲染。现在,我想在呈现后将新选项添加到 select 中。尝试了以下代码。它呈现为最后一个选项。但是,我需要先渲染这个选项。无论如何我们可以让这成为可能吗?
$('#Country').append( new Option('USA',2) );
$('#Country').trigger("chosen:updated");
请试试这个对我有用的例子。
$('#second').prepend( new Option('USA',2) );
$(".chosen-select").chosen();
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<select id="second" data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
<option value="" disabled="">Select country</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
</select>