不同的选择下拉菜单在搜索时应该有相同的下拉选项值
different selectize dropdown should have same dropdown option values while search
有两个(或更多)选择下拉列表,其中下拉列表值(选项值)由用户创建。问题是当用户在两个选择下拉列表中的任何一个中创建一些值时,两个选择应该具有相同的下拉值。下拉值应该相同并加载其他下拉值,而不管它们在哪里创建(添加)。
参考 Link:- https://selectize.github.io/selectize.js/
Fiddle Link:- http://jsfiddle.net/1oy2d6e9/
html
<section class="demo" id="demo-single-item-select">
<div class="header">
Single Item Select
</div>
<div class="sandbox">
<label for="select-beast">Beast:</label>
<select id="select-beast" class="demo-default" placeholder="create a person by typing...">
</select>
</div>
<div class="sandbox">
<label for="select-beast">Beast2:</label>
<select id="select-beast2" class="demo-default" placeholder="create a person by typing...">
</select>
</div>
<div class="description">
These two select box have same values when values are created in either of the two.
<a href="https://selectize.github.io/selectize.js/">https://selectize.github.io/selectize.js/</a>
</div>
</section>
js
var gArr = [];
// selectize should load all dropdown values ie in gArr initially;
$('#select-beast2').selectize({
create: true,
sortField: 'text',
searchField: 'item',
create: function(input) {
gArr.push(input); //<=======storing in global variable
return {
value: input,
text: input
}
}
});
$('#select-beast').selectize({
create: true,
sortField: 'text',
searchField: 'item',
create: function(input) {
gArr.push(input); //<=======storing in global variable
return {
value: input,
text: input
}
}
});
在 create
函数下,您可以获得另一个 select-box ,您需要添加选项,然后使用 addOption
向 select-box 添加新选项。
演示代码 :
$('#select-beast2').selectize({
create: true,
sortField: 'text',
searchField: 'item',
create: function(input) {
var selectize = $('#select-beast')[0].selectize; //get another slect box
selectize.addOption({
value: input,
text: input
}); //add option to it
return {
value: input,
text: input
}
}
});
$('#select-beast').selectize({
create: true,
sortField: 'text',
searchField: 'item',
create: function(input) {
var selectize = $('#select-beast2')[0].selectize; //get another slec box
selectize.addOption({
value: input,
text: input
}); //add option to it
return {
value: input,
text: input
}
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/css/selectize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/js/standalone/selectize.js"></script>
<section class="demo" id="demo-single-item-select">
<div class="header">
Single Item Select
</div>
<div class="sandbox">
<label for="select-beast">Beast:</label>
<select id="select-beast" class="demo-default" placeholder="create a person by typing...">
</select>
</div>
<div class="sandbox">
<label for="select-beast">Beast2:</label>
<select id="select-beast2" class="demo-default" placeholder="create a person by typing...">
</select>
</div>
<div class="description">
These two select box have same values when values are created in either of the two.
</div>
</section>
有两个(或更多)选择下拉列表,其中下拉列表值(选项值)由用户创建。问题是当用户在两个选择下拉列表中的任何一个中创建一些值时,两个选择应该具有相同的下拉值。下拉值应该相同并加载其他下拉值,而不管它们在哪里创建(添加)。
参考 Link:- https://selectize.github.io/selectize.js/
Fiddle Link:- http://jsfiddle.net/1oy2d6e9/
html
<section class="demo" id="demo-single-item-select">
<div class="header">
Single Item Select
</div>
<div class="sandbox">
<label for="select-beast">Beast:</label>
<select id="select-beast" class="demo-default" placeholder="create a person by typing...">
</select>
</div>
<div class="sandbox">
<label for="select-beast">Beast2:</label>
<select id="select-beast2" class="demo-default" placeholder="create a person by typing...">
</select>
</div>
<div class="description">
These two select box have same values when values are created in either of the two.
<a href="https://selectize.github.io/selectize.js/">https://selectize.github.io/selectize.js/</a>
</div>
</section>
js
var gArr = [];
// selectize should load all dropdown values ie in gArr initially;
$('#select-beast2').selectize({
create: true,
sortField: 'text',
searchField: 'item',
create: function(input) {
gArr.push(input); //<=======storing in global variable
return {
value: input,
text: input
}
}
});
$('#select-beast').selectize({
create: true,
sortField: 'text',
searchField: 'item',
create: function(input) {
gArr.push(input); //<=======storing in global variable
return {
value: input,
text: input
}
}
});
在 create
函数下,您可以获得另一个 select-box ,您需要添加选项,然后使用 addOption
向 select-box 添加新选项。
演示代码 :
$('#select-beast2').selectize({
create: true,
sortField: 'text',
searchField: 'item',
create: function(input) {
var selectize = $('#select-beast')[0].selectize; //get another slect box
selectize.addOption({
value: input,
text: input
}); //add option to it
return {
value: input,
text: input
}
}
});
$('#select-beast').selectize({
create: true,
sortField: 'text',
searchField: 'item',
create: function(input) {
var selectize = $('#select-beast2')[0].selectize; //get another slec box
selectize.addOption({
value: input,
text: input
}); //add option to it
return {
value: input,
text: input
}
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/css/selectize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/js/standalone/selectize.js"></script>
<section class="demo" id="demo-single-item-select">
<div class="header">
Single Item Select
</div>
<div class="sandbox">
<label for="select-beast">Beast:</label>
<select id="select-beast" class="demo-default" placeholder="create a person by typing...">
</select>
</div>
<div class="sandbox">
<label for="select-beast">Beast2:</label>
<select id="select-beast2" class="demo-default" placeholder="create a person by typing...">
</select>
</div>
<div class="description">
These two select box have same values when values are created in either of the two.
</div>
</section>