2

我的 HTML 页面中有一个选择/下拉菜单，它必须在页面中出现大约 10 次。简单的示例如下：

Qn 1: {dropdown} 是一个 {TextField}

Qn 2: {dropdown} 是一个 {TextField}

Qn 3: {dropdown} 是一个 {TextField}

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

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

4

2 回答 2

3

这是一种方法（使用 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}​​​​​​​​​​​​​​​​​​&lt;/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>

演示

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

于 2012-08-12T04:36:46.307 回答
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 元素，但您可以使用有序列表以便项目自动编号，或者如果您的实际需求有多个列，那么可能是一个表更合适。

给你的家庭作业：在我的答案中搜索你不理解的任何内容，和/或查找我在jQuery API doco中使用的各种 jQuery 方法。

于 2012-08-12T04:39:54.870 回答