使用jQuery </>选择<select>循环

时间:2013-12-04 15:17:53

标签: javascript jquery html

我不知道为什么这段代码不起作用:

$("body").append("<select>");

    for (j in boxes[i].ex_options ){

       $("body").append("<option>"+boxes[i].ex_options[j]+"</option>");

                    }

$("body").append("</select>");

<select>项目未正确显示。

他们要求这样做,以防万一:

var Box = function (ex_solution, ex_img, ex_options) {

    this.ex_solution    = ex_solution;
    this.ex_img         = ex_img;
    this.ex_options     = ex_options;

}

var boxes = [];

boxes.push(new Box ("solution1","images/caja1>",["solution 1.1", "option 1.2", "option 1.3"]));

谢谢

2 个答案:

答案 0 :(得分:2)

正如@ArunPJohny指出的那样,

append()不会连接字符串;它附加DOM元素。当您添加第一个<select>时,它会创建一个<select>元素,然后在其外部添加一堆<option>个元素。您可以做的是创建一个元素并将<option>的数组传递给append(),如下所示:

$("body").append(
    $("<select>").append(
        $.map(boxes[i].ex_options, function(option) {
            return $("<option>").text(option);
        })
    )
);

答案 1 :(得分:0)

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/redmond.datepick.css"> 
    <script type="text/javascript" src="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/jquery.datepick.js">  </script>


    <script type="text/javascript" language="javascript">
    $(function() {
        $('.datepick').datepick({ 
                dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'});
    });


    $(document).ready(function(){

        var Box = function (ex_solution, ex_img, ex_options) {
            this.ex_solution    = ex_solution;
            this.ex_img         = ex_img;
            this.ex_options     = ex_options;
        }

        var boxes = [];
        boxes.push(new Box ("solution1","images/caja1>",["solution 1.1", "option 1.2", "option 1.3"]));

        $("body").append("<select></select>");
        $.each(boxes[0].ex_options, function(index, value){
            console.debug(value);
            $("body select").append("<option>"+value+"</option>");
        });

    });
    </script>

    <body></body>