Question

是否可以在html中定义一个下拉列表并将其用于一个页面上的多个表单？我有这个下拉表格：＆lt; select name =“test1”id =“test1”＆gt; ＆lt; option value =“1”＆gt; One＆lt; / option＆gt; ＆lt; option value =“2”＆gt;两个＆lt; / option＆gt; ＆lt; option value =“3”＆gt; Three＆lt; / option＆gt; ＆LT; /选择＆GT; 而且我会有更多这样的形式，但有相同的列表。喜欢：＆lt; select name =“test2”id =“test2”＆gt; ＆lt; option value =“1”＆gt; One＆lt; / option＆gt; ＆lt; option value =“2”＆gt;两个＆lt; / option＆gt; ＆lt; option value =“3”＆gt; Three＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; select name =“test3”id =“test3”＆gt; ＆lt; option value =“1”＆gt; One＆lt; / option＆gt; ＆lt; option value =“2”＆gt;两个＆lt; / option＆gt; ＆lt; option value =“3”＆gt; Three＆lt; / option＆gt; ＆LT; /选择＆GT; 我的问题：是否可以为所有表单使用一个下拉列表？所以我没有复制每一个？（下拉列表中将有超过200行）

Answer 1

我假设您的服务器接受PHP（通常是）...

编写此脚本并将其另存为：myoption.php

<?php
echo 
'<select name="test1" id="test1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>';
?>

然后在脚本的所需位置创建一个php-include并将其另存为yourformname.php

<?php
    include ("myoption.php");
?>

Answer 2

是否可以在html中定义一个下拉列表并将其用于一页上有几种形式？

是 - 您可以使用javascript克隆客户端下拉列表。

请参阅：

var numberOfAdditionalSelects = 3;
var body = document.getElementsByTagName('body')[0];
var select1 = document.getElementById('select1');

for (var i = 0; i < numberOfAdditionalSelects; i++) {
    var additionalSelect = select1.cloneNode(true);
    additionalSelect.id = 'select' + (i+2);
    additionalSelect.setAttribute('name','select' + (i+2));
    body.appendChild(additionalSelect);
}

<select name="select1" id="select1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

Answer 3

使用Pure JavaScript：

var html = document.getElementById('test1').innerHTML;
var x = 1;
var y = 3;
while (y !== x++)
  document.getElementById('test' + x).innerHTML = html;

<select name="test1" id="test1">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select name="test2" id="test2"></select>
<select name="test3" id="test3"></select>

使用jQuery：

var html = $('#test1').html();
var x = 1;
var y = 3;
while (y !== x++)
  $('#test' + x).html(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="test1" id="test1">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select name="test2" id="test2"></select>
<select name="test3" id="test3"></select>

使用HTML5 <link>

 <link rel="import" href="filename.html">

Answer 4

您主要有两种选择。

您可以将组合框的逻辑集成到服务器代码中，也可以将其集成到客户端代码中。

由于我不知道你在服务器端使用的是什么，我将在客户端提供答案。

在javascript上，您可以使用每个选择共有的HTML创建变量。

然后，只需创建一个函数，将基于输入参数的其余组合框代码添加到公共变量中，并将整个代码注入DOM。

多个<select>元素的一个<option>列表

4 个答案: