从选择输入添加/删除/更新选项

时间:2012-09-19 10:50:41

标签: javascript

以下是我开始做的事情:http://jsfiddle.net/nd9ny/

现在它无法正常工作。

每次添加新的选择输入或删除输入时,我都想更新选项。

例如,我们有第一个选择输入,包含以下选项:

<select>
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
    <option value="4"></option>
</select>

当我向页面添加新输入时,我希望我的功能更新所有输入并从中删除新选择的选项。

<select>
    <option value="1" selected></option>
    <option value="3"></option> // The second one is removed
    <option value="4"></option>
</select>

<select>
    <option value="2" selected></option> // The first one is removed
    <option value="3"></option>
    <option value="4"></option>
</select>

然后,如果我删除第一个输入,第二个输入:

<select>
    <option value="1"></option>
    <option value="2" selected></option>
    <option value="3"></option>
    <option value="4"></option>
</select>

需要纯Javascript代码。

1 个答案:

答案 0 :(得分:1)

您可以尝试以下解决方案:

- CSS:

.hidden {
    display: none;  
}

- JS功能:

function hide_selected(el) {

    var index = el.selectedIndex;

    // Show every options
    for(var i=0; i<el.length; i++)
        el[i].className="";

    // Hide the selected one
    el[index].className="hidden";
}

- HTML示例:

<body>
    <select onchange="javascript:hide_selected(this);">
        <option value="1" class="hidden" selected="selected">1</option>
        <option value="2" class="">2</option>
        <option value="3" class="">3</option>
        <option value="4" class="">4</option>
    </select>
</body>

注意:此功能已在Firefox中测试,您可能需要检查这是否适用于其他浏览器。

希望这有帮助