Question

我目前正在创建一个订单表单，有几个选项我有一个值为1-8的Dropbox。对于每个投递箱，我必须使用以下代码

<select name="mydropdownbox">
                <option value=""> 0 </option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
            </select>

每次添加新表单时，我都必须使用相同的代码。我想知道是否有办法让下拉框都使用相同的值集，所以我的html页面中没有一堆重复代码。

Answer 1

仅使用HTML无法完成，因为HTML不是脚本语言，因此您无法进行循环以避免重复。

您有两种选择：

使用生成完整HTML的服务器端语言。请注意，这将是一个服务器密集型，用户将不得不下载完整的HTML代码
使用javascript。这将更加客户密集，您将节省带宽。可能的问题是某些用户可能已禁用JS。

使用HTML5 <template>元素：

可以轻松实现JavaScript方式

JS：

var content = document.getElementById('dropdown-template').content;
for(var i=0; i<10; ++i) {
    document.body.appendChild(document.importNode(content, true));
}

HTML：

<template id="dropdown-template">
    <select name="mydropdownbox">  <!-- ... -->   </select>
</template>

Demo

html drop box显示来自一个源的值

1 个答案: