我正在尝试使用 this theme 进行动态下拉选择使用 JavaScript。 <option>使用 AJAX 从文本文件中的数组中获取元素并将其插入 <select>下拉菜单:
<head>
<script src="jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
<link rel="stylesheet" type="text/css" href="css/cs-skin-border.css" />
</head>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "http://localhost/array.txt",
beforeSend: function(xhr) {
xhr.overrideMimeType("text/plain; charset=x-user-defined");
}
})
.done(function(data) {
var myArray = JSON.parse(data);
var output = [];
$.each(myArray, function(key, value)
{
output.push('<option value="' + value + '">'+ value +'</option>');
});
$('#myselect').html(output.join(''));
});
</script>
这是 HTML 部分:
<body>
<form id="myform" action="select.php">
<input id="myinput" name="owncategory" type="text"> <br><br>
<div>
<select class="cs-select cs-skin-border" id="myselect">
<option value="" disabled selected>Select a category</option>
</select>
</div>
<div><input id="mysubmit" type="submit" value="Submit"></div>
</form>
<script src="js/classie.js"></script>
<script src="js/selectFx.js"></script>
<script>
(function() {
new SelectFx($(".cs-select").get(0));
})();
</script>
</body>
问题是，下拉选择(现在由脚本风格化)不显示添加的 <option>元素，即使在浏览器上检查页面时，它们也在那里。我不知道如何将它们显示为风格化下拉列表的一部分。有什么想法吗？
编辑:我刚刚想通了，有点。因此，不要使用 #myselect 将其插入到选择元素上编号:
$('#myselect').html(output.join(''));
我将其插入 <div>页面加载时显示的元素:
$('.cs-options').html(output.join(''));
现在我得到了这个:/image/Zav88.png
但现在我当前的问题是它们无法选择。
最佳答案
为我工作。
<li data-option="" data-value="therock" class=""><span>The rock</span></li>
关于javascript - 在动态下拉选择中插入选项元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32579211/