新方法

Question

我想编写一个代码，它会显示两个选项标签，如：

<select id="test1" id="name" onchange="checkField()">
    <option>----</option>
<option>Selected A Group</option>
<option>Selected B Group</option>
</select>
<div id="optional">Please select!</div>

我的目标是，当用户选择选项A时，根据该选项，E应该下降而不是选项B，C，D。另一方面，如果用户选择选项B，则其他一组像选项X这样的选项应该会关闭。最后，当用户选择了所有选项时，应该弹出提交按钮，并仅在点击事件上重定向到URL。肯定会有条件就像c语言中的switch case一样，那HTML应该是什么？

这继续！这是我查询的C示例。什么是HTML只使用选项标签？即使在JavaScript中。

http://jsfiddle.net/3GkrX

JS

function checkField(){
var temp = document.getElementById('test1').value;

    switch(temp){

        case "Selected A Group":
            document.getElementById("optional").innerHTML="<select name='optionalA'><option>1</option><option>2</option></select>";
            break;
        case "Selected B Group":
            document.getElementById("optional").innerHTML="<select name='optionalB'><option>3</option><option>4</option></select>";
            break
            default:
                document.getElementById("optional").innerHTML="Please select!";
            break;

    }

}

Answer 1

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

function updateSel() {
    var sel = document.getElementById('sel');
    var hidden = sel.getElementsByClassName('hidden');
    for (var i=0;i<hidden.length;i++) {
        var showIt = sel.value == hidden[i].dataset.toggle || sel.selectedOptions[0] == hidden[i];
        hidden[i].style.display = showIt ? 'inline' : 'none';
    }
}

使用此HTML代码供您选择：

<select id="sel">
    <option value="A" selected="selected">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E" class="hidden" data-toggle="A">E</option>
    <option value="X" class="hidden" data-toggle="B">X</option>
</select>

Here 是此代码的演示。

这样做的原因如下：每次更改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<hidden.length;i++) {
        list[i].style.display = hidden[i] == doShow?'inline':'none';
    }
}

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

<option value="E" class="hidden" id="toggle-A">E</option>

This fiddle 显示了该如何运作。它基本上做同样的事情，但不是让脚本找到需要全部显示的标记，而是必须在switch语句中单独定义每个标记。我建议在没有switch语句的情况下使用上面的medhod，但是如果你希望能够做出例如X <option> show，如果用户选择 B或C，那么切换方法可能更好。在这种情况下，您只需添加另一个case 'C':，然后它也会在用户选择C时显示。如果您只需要一次显示1个特定选项（在您的问题中似乎如此），则第一种方法更容易设置。

新方法

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

here 是脚本的演示。

代码本身：

<form action="javascript:void(0);" id="questionForm">
    <select name="Q1">
        <option selected disabled>----</option>
        <option>Selected A Group</option>
        <option>Selected B Group</option>
    </select>
</form>

在这里，我使代码尽可能干净：只在开始时显示默认选择。 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<addSelects.length;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事件监听器添加到第一个选择元素。

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

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

1 个答案:

`switch`方法

新方法

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

1 个答案:

switch方法

新方法

`switch`方法