在动态下拉列表选择中插入选项元素

时间:2015-09-15 06:33:44

标签: javascript jquery html

我尝试使用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

但现在我目前的问题是他们无法选择。

1 个答案:

答案 0 :(得分:0)

enter image description here

为我工作。

<li data-option="" data-value="therock" class=""><span>The rock</span></li>