当前位置：首页 > 编程日记 > 正文

html 多项选择,选项标签中的HTML多字段选择

编程日记 2024-06-13 17:00:00

这可以通过switch语句实现，但这不是最好的方法。我建议将以下函数作为change事件的事件处理程序。您还需要在窗口加载时运行它，以初始化它。

function updateSel() {

var sel = document.getElementById('sel');

var hidden = sel.getElementsByClassName('hidden');

for (var i=0;i

var showIt = sel.value == hidden[i].dataset.toggle || sel.selectedOptions[0] == hidden[i];

hidden[i].style.display = showIt ? 'inline' : 'none';

}

使用此HTML代码供您选择：

这样做的原因如下：每次更改select的值时，都会检查option标记class="hidden"是否可见。它被选中时应该是可见的，或者选择使它显示的选项(存储在data-toggle attribute中)被选中。

switch方法

如果您希望使用switch语句执行此操作，则必须定义要显示的元素，然后隐藏所有其他元素。这看起来像这样：

function updateSel() {

var sel = document.getElementById('sel');

var hidden = sel.getElementsByClassName('hidden');

var doShow;

switch (sel.value) {

case: 'A': case 'E':

doShow = hidden['toggle-A'];

break;

case: 'B': case 'X':

doShow = hidden['toggle-B'];

break;

}

for (var i=0;i

list[i].style.display = hidden[i] == doShow?'inline':'none';

}

要实现这一点，您必须将data-toggle属性更改为id，但是这样：

show，如果用户选择 B或C，那么切换方法可能更好。在这种情况下，您只需添加另一个case 'C':，然后它也会在用户选择C时显示。如果您只需要一次显示1个特定选项(在您的问题中似乎如此)，则第一种方法更容易设置。

新方法

为了回应您的评论，我制作了另一个符合您要求的脚本：

代码本身：

----

Selected A Group

Selected B Group

在这里，我使代码尽可能干净：只在开始时显示默认选择。 action=""属性应更改为您提交函数的位置。

JavaScript：

//http://stackoverflow.com/q/4793604/1256925

function insertAfter(referenceNode, newNode) {

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

}

var furtherSelects = {

'Selected A Group': ['Selected C Group', 'Selected D Group'],

'Selected B Group': ['Selected E Group', 'Selected F Group'],

'Selected C Group': ['Selected G Group', 'Selected H Group'],

'Selected D Group': ['Selected I Group', 'Selected J Group', 'Selected K Group'],

'Selected E Group': ['Selected G Group', 'Selected H Group'],

'Selected F Group': ['Selected I Group', 'Selected J Group', 'Selected K Group'],

}

function checkField(){

addSelects = furtherSelects[this.value];

if (!addSelects) { //For the final load of selects, add a button to submit

var button = document.createElement('button');

button.innerHTML = 'Submit';

button.id='submitQuestionForm';

insertAfter(this, button);

return;

}

var sel = document.createElement('select');

var Q_num = parseInt(this.name.substr(1))+1;

var siblingSelects = this.parentNode.getElementsByTagName('select');

for (var i=siblingSelects.length-1;i>=0;i--) {

if (parseInt(siblingSelects[i].name.substr(1)) >= Q_num) {

siblingSelects[i].remove();

}

var submitButton = document.getElementById('submitQuestionForm');

if (submitButton) submitButton.remove();

sel.setAttribute('name', 'Q'+Q_num);

sel.addEventListener('change', checkField); //Make each extra element have another checkField

var option = document.createElement('option');

option.innerHTML = '----';

option.disabled = true;

option.selected = true;

sel.appendChild(option); //Add the default option first

for (var i=0;i

option = document.createElement('option');

option.innerHTML = addSelects[i];

sel.appendChild(option);

}

insertAfter(this, sel);

}

addEventListener('load', function() {

document.getElementById('questionForm')

.getElementsByTagName('select')[0]

.addEventListener('change', checkField);

});

这里我已经为在单个对象中选择另一个选项后显示的选项添加了所有选项。这里定义了选择的所有值，并在选择该选项时添加了一组选项。例如，如果我选择Selected A Group，我会看到包含2个选项的选项：Selected C Group和Selected D Group。

事件处理程序的作用是：它首先检查是否存在为furtherSelects对象中的所选选项定义的选项列表(因此，如果furtherSelects具有属性名称等于所选值)。如果是，则添加提交按钮，否则添加指定的选择标记。

它首先浏览所有其他选择标签的列表，以查看它们所属的问题(第3个选择属于第3个问题)是否是正在修改的问题背后的问题。如果是这样，它将删除该select元素。如果它存在，它也默认删除按钮，因为只有另外一个选择添加时，该功能的这部分才会运行，这意味着你还没有回答最后一个问题。

然后创建select标记并添加事件处理程序，并遍历select元素选项的值数组，并创建每个选项标记，然后将该选项标记放在select标记中。之后，它会将select标记添加到正在更改的标记之后。

在底部有一个简单的onload事件监听器，它将onchange事件监听器添加到第一个选择元素。

我希望这就是你要找的东西。

https://www.dkcj.cn/info/10557.html

html 多项选择,选项标签中的HTML多字段选择

相关文章：

tp5.0 queue 队列操作

java redis管理_优雅时间管理Java轻松做到，想学么？

jenkins运行日志时间与linux,Jenkins 用户文档（运行多个步骤）

HPU组队赛B：问题（二进制枚举）

html脱机不显示图片,Python绘图脱机图表嵌入HTML（不工作）

数据库分库分表(sharding)系列

php imagecopy 用法,php使用imagecopymerge()函数创建半透明水印

linux系统yum源,Linux开启安装EPEL YUM源

MATLAB简易验证码识别程序介绍

mac终端命令-----常规操作

php true true true,php-为什么此评估为true

一个html文件放到服务器访问,访问云服务器里面的html文件

limbo可以运行linux,这次真的了，安卓手机可以安装 Windows 10 了

Fedora dnf配置

2021梧州一中高考成绩查询,2021年广西高考成绩查询网站查分网址：https://www.gxeea.cn/...

php ip地址地区,PHP查询ip所在地(省份，市)

描述一下 Intent 和 IntentFilter?

linux字符界面教程,打造字符界面的多媒体Linux系统

Linux 环境搭建Git 服务器，并且修改SSH端口使用

php发光字体代码,CSS3怎么实现字体发光效果

计算机专业英语chapter012,计算机专业英语 chapter_1.ppt

C#与C++的区别

黑裙安装linux环境,Linux学习笔记(一) ---- 安装Linux系统

mybatis批量更新的两种实现方式

php常用20函数,PHP常用函数

tcpdump保存数据包

在线翻译系统属于计算机应用领域中,【单选题】网状物编织物和机件上的滚花部分,可以在轮廓线附件用( )线示意画出...

linux进行主机发现,linux – 网络上所有计算机的主机名发现

Android5.0之CoordinatorLayout的使用

微信js sdk动态引用