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

Question

我正在尝试使用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 id的select元素：

$('#myselect').html(output.join(''));

我将它插入到<div>元素上，该元素在页面加载时显示：

$('.cs-options').html(output.join(''));

现在我明白了：http://i.imgur.com/KMEurVP.png

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

Answer 1

为我工作。

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

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

问题描述投票：1回答：1

1个回答

最新问题

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

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1