html 多 < option>个元素的一个列表< select>[重复]

ymdaylpp  于 2023-04-04  发布在  其他
关注(0)|答案(4)|浏览(143)

此问题在此处已有答案

HTML - sharing values between different s(4个答案)
4天前关闭。
是否可以在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">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

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

**我的问题是:**是否可以为所有表单使用一个下拉列表?这样我就不必复制每个表单了?(下拉列表中将有200多行)

wpcxdonn

wpcxdonn1#

是否可以在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>
0qx6xfy6

0qx6xfy62#

我假设你的服务器接受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");
?>
5q4ezhmt

5q4ezhmt3#

你主要有两个选择。
您可以将组合框的逻辑集成到服务器代码中,也可以将其集成到客户机代码中。
因为我不知道你在服务器端使用什么,我将在客户端回答。
在javascript上,您可以使用每个select通用的HTML创建一个变量。
然后,只需创建一个函数,根据输入参数将组合框代码的其余部分添加到公共变量中,并将整个代码注入DOM。

a1o7rhls

a1o7rhls4#

使用纯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:
一个二个一个一个
使用HTML5 <link>

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

相关问题