在 DOM 中选择页面加载时未呈现的下拉内容
Selectize dropdown content not rendered on page load in DOM
我正在使用 Selectize.js。
在页面加载时检查选定下拉列表中的元素时缺少实际内容(在 .selectize-dropdown-content
内):
<div class="selectize-dropdown single aritklmodel" style="display: none;">
<div class="selectize-dropdown-content"></div>
</div>
点击后填充内容:
<div class="selectize-dropdown single aritklmodel" style="display: none; visibility: visible; width: 255.617px; top: 34px; left: 0px;">
<div class="selectize-dropdown-content">
<div style="display: block" data-marka="2" data-selectable="" data-value="a2" class="">a2</div>
<div style="display: block" data-marka="1" data-selectable="" data-value="A50">A50</div>
</div>
</div>
有没有办法在页面加载时填充它?
因为从上面可以看出,我使用自定义数据属性,我可以根据之前的 Selectized 下拉列表过滤选项 selection。
当前的问题是,当我在第一个下拉列表中创建 selection 时,过滤器无法正常工作,因为它没有任何可过滤的内容,因为内容不在 DOM 中,就在我单击之后一旦在第二个下拉列表中填充内容 DOM,过滤将在第一个下拉列表更改后开始工作。
我试过triggering/simulating点击事件,它不起作用。
我已阅读 API 和使用文档,如果我错过了答案,那是我不明白(不是母语为英语的人)
$('select').selectize({
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
编辑:
有没有办法以编程方式取消 select 化 HTML select,这样我就可以对 HTML select 本身进行过滤,并且然后select再次调整它?
有什么方法可以根据另一个 select 化的下拉列表进行过滤吗?使用数据属性或任何其他?
您可以使用 refreshOptions
方法在页面加载时 populate
选项
示例 1
// initialize the Selectize control
var $select = $('select').selectize({});
// fetch the instance
var selectize = $select[0].selectize; // 0 for select index
selectize.refreshOptions(false); // populate option on load
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
示例 2
// initialize the Selectize control
var $select = $('select').selectize({
render: {
option: function(data, escape) {
return "<div class='option selected' data-id='" + escape(data.id) + "'>" + escape(data.text) + "</div>"
}
}
});
// fetch the instance
let car_select = $select[0].selectize; // 0 index for car select
let model_select = $select[1].selectize; // 1 index for model select
model_select.refreshOptions(false); // populate model select options on page load
car_select.on('item_add', function(value, item) {
let selector = model_select['$dropdown_content'].children();
model_select.setValue('none');
selector.hide();
selector.each(function() {
let tmp = $(this);
if (tmp.data('id') == value) {
tmp.show();
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<select name="cars" id="cars">
<option data-id="volvo" value="volvo">Volvo</option>
<option data-id="saab" value="saab">Saab</option>
<option data-id="mercedes" value="mercedes">Mercedes</option>
<option data-id="audi" value="audi">Audi</option>
</select>
<select name="models" id="models">
<option data-data='{"id":"none"}' value="none">--Select model --</option>
<option data-data='{"id":"volvo"}' value="volvo xc90">Volvo XC90</option>
<option data-data='{"id":"volvo"}' value="volvo xc60">Volvo XC60</option>
<option data-data='{"id":"saab"}' value="saab 900 convertible">Saab 900 Convertible</option>
<option data-data='{"id":"mercedes"}' value="mercedes benz C class">Mercedes Benz C Class</option>
<option data-data='{"id":"mercedes"}' value="mercedes benz A class">Mercedes Benz A Class</option>
<option data-data='{"id":"audi"}' value="audi e-tron">Audi E-Tron</option>
<option data-data='{"id":"audi"}' value="audi a7">Audi A7</option>
</select>
这是替代解决方案。
每当您的 selectize-input
被点击时,您都可以检查发生点击事件的输入是否与 select 相关,具体取决于此执行任务。如果是 something
(举个例子)然后你首先需要隐藏所有 divs 里面 selectize-dropdown-content
然后检查数据属性是否与 cars
select-box 的值匹配取决于这个显示 div else hide.Also,因为 div 是在单击输入框时生成的,因此您可以将一个选项 selected 作为默认值。
演示代码 :
$('select#cars').selectize();
$('select#something').selectize({
render: {
option: function(data, escape) {
return "<div class='option selected' data-marka='" + escape(data.marka) + "'>" + escape(data.text) + "</div>"
}
}
});
$(".selectize-input").on('click', function() {
var selector = $(this).closest(".outer").find(".selectize-dropdown-content div")
//get value of other select
var value = $("#cars").val()
//check if id is something
if ($(this).closest(".outer").find('select').attr('id') == "something") {
selector.hide() //hide divs
selector.each(function() {
//see if data-marka match value
if ($(this).data('marka') === value || $(this).data('value') == 'none') {
$(this).show() //show that div
}
})
} else {
//if cars select box is change find next select-box input and change it to default
$(this).closest(".outer").next().find(".selectize-control .item").attr('data-value', "none")
$(this).closest(".outer").next().find(".selectize-control .item").text("--Select one --");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<div class="outer">
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="Saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="outer">
<select id="something">
<option value="none">--Select one --</option>
<option data-data='{"marka": "volvo"}' value="1">1</option>
<option data-data='{"marka": "volvo"}' value="2">2</option>
<option data-data='{"marka": "Saab"}' value="3">3</option>
<option data-data='{"marka": "audi"}' value="4">4</option>
<option data-data='{"marka": "mercedes"}' value="5">5</option>
<option data-data='{"marka": "mercedes"}' value="6">6</option>
</select>
<div>
我正在使用 Selectize.js。
在页面加载时检查选定下拉列表中的元素时缺少实际内容(在 .selectize-dropdown-content
内):
<div class="selectize-dropdown single aritklmodel" style="display: none;">
<div class="selectize-dropdown-content"></div>
</div>
点击后填充内容:
<div class="selectize-dropdown single aritklmodel" style="display: none; visibility: visible; width: 255.617px; top: 34px; left: 0px;">
<div class="selectize-dropdown-content">
<div style="display: block" data-marka="2" data-selectable="" data-value="a2" class="">a2</div>
<div style="display: block" data-marka="1" data-selectable="" data-value="A50">A50</div>
</div>
</div>
有没有办法在页面加载时填充它?
因为从上面可以看出,我使用自定义数据属性,我可以根据之前的 Selectized 下拉列表过滤选项 selection。
当前的问题是,当我在第一个下拉列表中创建 selection 时,过滤器无法正常工作,因为它没有任何可过滤的内容,因为内容不在 DOM 中,就在我单击之后一旦在第二个下拉列表中填充内容 DOM,过滤将在第一个下拉列表更改后开始工作。
我试过triggering/simulating点击事件,它不起作用。
我已阅读 API 和使用文档,如果我错过了答案,那是我不明白(不是母语为英语的人)
$('select').selectize({
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
编辑:
有没有办法以编程方式取消 select 化 HTML select,这样我就可以对 HTML select 本身进行过滤,并且然后select再次调整它?
有什么方法可以根据另一个 select 化的下拉列表进行过滤吗?使用数据属性或任何其他?
您可以使用 refreshOptions
方法在页面加载时 populate
选项
示例 1
// initialize the Selectize control
var $select = $('select').selectize({});
// fetch the instance
var selectize = $select[0].selectize; // 0 for select index
selectize.refreshOptions(false); // populate option on load
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
示例 2
// initialize the Selectize control
var $select = $('select').selectize({
render: {
option: function(data, escape) {
return "<div class='option selected' data-id='" + escape(data.id) + "'>" + escape(data.text) + "</div>"
}
}
});
// fetch the instance
let car_select = $select[0].selectize; // 0 index for car select
let model_select = $select[1].selectize; // 1 index for model select
model_select.refreshOptions(false); // populate model select options on page load
car_select.on('item_add', function(value, item) {
let selector = model_select['$dropdown_content'].children();
model_select.setValue('none');
selector.hide();
selector.each(function() {
let tmp = $(this);
if (tmp.data('id') == value) {
tmp.show();
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<select name="cars" id="cars">
<option data-id="volvo" value="volvo">Volvo</option>
<option data-id="saab" value="saab">Saab</option>
<option data-id="mercedes" value="mercedes">Mercedes</option>
<option data-id="audi" value="audi">Audi</option>
</select>
<select name="models" id="models">
<option data-data='{"id":"none"}' value="none">--Select model --</option>
<option data-data='{"id":"volvo"}' value="volvo xc90">Volvo XC90</option>
<option data-data='{"id":"volvo"}' value="volvo xc60">Volvo XC60</option>
<option data-data='{"id":"saab"}' value="saab 900 convertible">Saab 900 Convertible</option>
<option data-data='{"id":"mercedes"}' value="mercedes benz C class">Mercedes Benz C Class</option>
<option data-data='{"id":"mercedes"}' value="mercedes benz A class">Mercedes Benz A Class</option>
<option data-data='{"id":"audi"}' value="audi e-tron">Audi E-Tron</option>
<option data-data='{"id":"audi"}' value="audi a7">Audi A7</option>
</select>
这是替代解决方案。
每当您的 selectize-input
被点击时,您都可以检查发生点击事件的输入是否与 select 相关,具体取决于此执行任务。如果是 something
(举个例子)然后你首先需要隐藏所有 divs 里面 selectize-dropdown-content
然后检查数据属性是否与 cars
select-box 的值匹配取决于这个显示 div else hide.Also,因为 div 是在单击输入框时生成的,因此您可以将一个选项 selected 作为默认值。
演示代码 :
$('select#cars').selectize();
$('select#something').selectize({
render: {
option: function(data, escape) {
return "<div class='option selected' data-marka='" + escape(data.marka) + "'>" + escape(data.text) + "</div>"
}
}
});
$(".selectize-input").on('click', function() {
var selector = $(this).closest(".outer").find(".selectize-dropdown-content div")
//get value of other select
var value = $("#cars").val()
//check if id is something
if ($(this).closest(".outer").find('select').attr('id') == "something") {
selector.hide() //hide divs
selector.each(function() {
//see if data-marka match value
if ($(this).data('marka') === value || $(this).data('value') == 'none') {
$(this).show() //show that div
}
})
} else {
//if cars select box is change find next select-box input and change it to default
$(this).closest(".outer").next().find(".selectize-control .item").attr('data-value', "none")
$(this).closest(".outer").next().find(".selectize-control .item").text("--Select one --");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<div class="outer">
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="Saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="outer">
<select id="something">
<option value="none">--Select one --</option>
<option data-data='{"marka": "volvo"}' value="1">1</option>
<option data-data='{"marka": "volvo"}' value="2">2</option>
<option data-data='{"marka": "Saab"}' value="3">3</option>
<option data-data='{"marka": "audi"}' value="4">4</option>
<option data-data='{"marka": "mercedes"}' value="5">5</option>
<option data-data='{"marka": "mercedes"}' value="6">6</option>
</select>
<div>