我尝试使用Javascript使用this theme进行动态下拉菜单选择。 <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
id:的select元素
$('#myselect').html(output.join(''));
我将其插入到<div>
元素上,该元素会在页面加载时显示:
$('.cs-options').html(output.join(''));
现在我明白了:http://i.imgur.com/KMEurVP.png
但现在我目前的问题是他们无法选择。