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

这可以通过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代码供您选择：

A

B

C

D

E

X

这样做的原因如下：每次更改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，但是这样：

E

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事件监听器添加到第一个选择元素。

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