[英]How to trigger the native select box using SelectBoxIt jquery plugin
I have used SelectBoxIt plugin to display the select boxes in my application. 我已经使用SelectBoxIt插件在我的应用程序中显示选择框。
I have two select boxes, if I change the value in first select box, another should automatically update (it should trigger automatically). 我有两个选择框,如果我更改第一个选择框的值,则另一个应该自动更新(它应该自动触发)。
For both select boxes values are passing dynamically, I used below code 对于两个选择框值都是动态传递的,我在下面的代码中使用了
$('.ember-select').selectBoxIt({
theme: "default",
autoWidth: false,
triggerChangeCombined: true
});
i used 我用了
$('.ember-select').selectBoxIt({
native: true
});
it will trigger but the slectbox other properties like "theme","autoWidth" are not rendering. 它将触发,但不会显示slectbox的其他属性,例如“ theme”,“ autoWidth”。
Ok You can check this Demo and code below: 确定,您可以在下面查看此演示和代码:
Here is your sample HTML 这是您的示例HTML
<div class='formArea'>
<label>Mode:</label><br/>
<select id="modes" name="modes">
<option disabled selected>
-- Choose a Mode --
</option>
<option>Vehicle</option>
<option>Fleet</option>
<option>Trailers</option>
</select><br/>
<label>Options:</label><br/>
<select id="optionss" name="optionss">
<option disabled selected>
-- Options --
</option>
</select><br/>
</div>
Below is your JS: 以下是您的JS:
var vehicles = ['Vehicle 1', 'Vehicle 2', 'Vehicle 3', 'Vehicle 4', 'Vehicle 5']; //add all your vehicle options here
var fleet = ['fleet 1', 'fleet 2', 'fleet 3', 'fleet 4', 'fleet 5']; //add all your fleet options here
var trailers = ['trailer 1', 'trailer 2', 'trailer 3', 'trailer 4', 'trailer 5']; //add all your trailers options here
var optionss = [{name: "Vehicles", clubs: vehicles},
{name: "Fleet", clubs: fleet},
{name: "Trailers", clubs: trailers}
];
$(function() {
var selectedmode = $('#modes option:selected').text()
var optionmenu = $('#optionss');
for (var i = 0; i < optionss.length; i++) {
if (selectedmode === optionss[i].name) {
$.each(optionss, function(val, obj) {
optionmenu.append($('<option></option>').val(val).html(obj.clubs));
});
}
}
});
$('#modes').on('change',function(){
var mode=$(this).find(":selected").text();
$('#optionss').find('option').remove();
switch(mode)
{
case 'Vehicles':
$.each(vehicles, function(key, value) {
$('#optionss')
.append($("<option></option>")
.text(value));
});
break;
case 'Fleet':
$.each(fleet, function(key, value) {
$('#optionss')
.append($("<option></option>")
.text(value));
});
break;
case 'Trailers':
$.each(trailers, function(key, value) {
$('#optionss')
.append($("<option></option>")
.text(value));
});
break;
default:break;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.