Ner*_*dar 6 html javascript jquery drop-down-menu semantic-ui
语义下拉有问题.
我一直在使用Semantic-Ui,并希望动态更改下拉项.也就是说,当我从第一个下拉列表中选择值时,第二个下拉列表的项目将会更改.但问题是,当项目发生变化时,无法选择第二个下拉列表,该值不会改变.下拉列表不会倒退.
HTML
The First Dropdown
<div id="programmetype" class="ui fluid selection dropdown">
<input type="hidden" name="programmetype">
<div class="text">Choose..</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="val1">Car</div>
<div class="item" data-value="val2">Tank</div>
<div class="item" data-value="val3">Plane</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
第二次下拉
<div id="servicetype" class="ui fluid selection dropdown">
<input type="hidden" name="servicetype">
<div class="text">Choose..</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="select">Choose..</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
..........................
jQuery
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "val1")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Saloon</div>' +
'<div class="item" data-value="val2">Truck</div>'
);
};
if (val == "val2")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Abraham</div>' +
'<div class="item" data-value="val2">Leopard</div>' +
);
};
if (val == "val3")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Jet</div>' +
'<div class="item" data-value="val2">Bomber</div>' +
);
};
}
});
Run Code Online (Sandbox Code Playgroud)
找到了,
我$('#servicetype').dropdown();
在分配值后放了:
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "fertility")
{
$('#servicetype').dropdown({'set value':'something'});
$('#servicetype .menu').html(
'<div class="item" data-value="acp">ACP</div>' +
'<div class="item" data-value="art">ART</div>'
);
$('#servicetype').dropdown();
};
});
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
17274 次 |
最近记录: |