Question

我的HTML页面中有一个选择/下拉列表，必须在页面中显示约10次。简单的样本如下：

Qn 1：{dropdown}是{TextField}

Qn 2：{dropdown}是{TextField}

Qn 3：{dropdown}是{TextField}

其中下拉列表列出了相同且静态的各种选项（字符串数组 - 没有服务器组件）。

我想创建一次下拉列表并使用它。 CSS可以拥有html的数据元素：select吗？或者我如何编写javascript代码来填充选择元素？

Answer 1

这是一种方法（使用jQuery更容易地选择和迭代所有下拉列表）：

<p>Qn 1: <select class="repeat"></select> is a {TextField}</p>
<p>Qn 2: <select class="repeat"></select> is a {TextField}</p>
<p>Qn 3: <select class="repeat"></select> is a {TextField}</p>

<script type="text/javascript">
    var optionOpen = "<option>";
    var optionClosed = "</option>";
    var selectItems = ["firstItem", "secondItem", "thirdItem"];

    $(".repeat").each(function(){
        for (key in selectItems)
        {
            $(this).append(optionOpen + selectItems[key] + optionClosed);
        }
    });
</script>

DEMO

我将选择选项格式化为列表并连接字符串，以便在页面之间轻松更改和重用。只需在selectItems列表中添加选项，即可将其添加到具有类<select>的每个repeat标记中。如果您需要表单单独处理它们，请为每个<select>提供不同的name属性。

Answer 2

有很多方法可以做到这一点。这是我想到的第一个：

为第一行提供“模板”行：

<ul>
    <li class="template">Qn <span class="qnum">1</span>:
        <select name="sel">
            <option val="0"></option>
            <option val="1">Option 1</option>
            <option val="2">Option 2</option>
            <option val="3">Option 3</option>
        </select>
        is a <input type="text" name="isa">
    </li>
</ul>

然后根据需要多次复制该行：

$(document).ready(function() {
    var $ul = $("ul"),
        $li = $ul.find("li.template"),
        i;

    for (i=2; i <= 10; i++)
        $li.clone().appendTo($ul).find("span.qnum").text(i);
});

演示：http://jsfiddle.net/nnnnnn/kJd33/

显然，我已经选择将每个项目作为带有无序列表的li元素，但是您可以使用有序列表以便项目自动编号，或者如果您的实际需求具有多个列，那么可能是表格会更合适。

为您完成家庭作业：Google在我的答案中您不理解的任何内容，和/或查找我在jQuery API doco中使用的各种jQuery方法。

如何在HTML中重复选择元素

2 个答案: