语义 ui 下拉菜单有问题。我一直在使用 Semantic-Ui,并希望动态更改下拉项。也就是说,当我从第一个下拉菜单中选择值时,第二个下拉菜单的项目没有得到反射(reflect)。
这是代码片段:
$(document).ready(function() {
$("#programmetype").dropdown({
onChange: function() {
$('#servicetype').html(
'<div class="ui selection dropdown select-
language ">'+'<div class="
text ">Choose..</div>'+'<i class="
dropdown icon "></i>'+' <div class="
menu ">'+
'<div class="item" data-value="acp">ACP</div>' +
'<div class="item" data-
value = "art" > ART < /div>'+'</div > '+' < /div>'
);
$('#servicetype').dropdown();
}
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<div id="programmetype" class="ui selection dropdown select-
language">
<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>
<div id="servicetype"></div>
最佳答案
语法错误
您在 string
中进行换行,使用 +
运算符正确换行,您的脚本不会发现语法错误,因此您的代码应该跑。
第二个下拉菜单
关于第二个下拉列表。你错过了什么。查看第一个下拉 DOM 结构。父元素 #programmetype
具有用于应用 CSS 的类 ui selection dropdown select-language
。
但对于您的 #servicetype
,您没有这些类,也从未添加过它们,因此在第一个下拉列表的 onChange
中,添加这些类,(检查脚本)
此外,您还需要一个隐藏的input
来保存您遗漏的数据。但它存在于第一个下拉列表中。检查代码段,我已经添加了它们。
希望这对您有所帮助。
检查下面的片段:
$(document).ready(function() {
$("#programmetype").dropdown({
onChange: function() {
$('#servicetype').addClass('ui selection dropdown select-language'); // add these classes for the UI.
$('#servicetype').html(
'<input type="hidden" name="servicetype">' // you need a hidden input and the rest is fine
+'<div class="text">Choose..</div>'
+'<i class="dropdown icon "></i>'
+'<div class="menu">'
+'<div class="item" data-value="acp">ACP</div>'
+'<div class="item" data-value="art"> ART</div>'
+'</div>'
+'</div>'
);
$('#servicetype').dropdown();
}
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<div id="programmetype" class="ui selection dropdown select-language">
<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>
<div id="servicetype"></div>
关于javascript - 使用语义 ui 的动态下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56341481/