在html中实现动态选择框

Question

我正在尝试开发一个选择框,以便我可以动态更改所选的选项

例如

selectbox option              display message
---------------------------------------------
field 1                       text
field 2                       integer
field 3                       bool

有三个选择框.第一个选择框提供三个选项.

1. 当选择框1时,其他选择框将只有2个选项(不包括选中的选项)
2. 选择选择框2时,其他选择框将只有1个选项(不包括所选的两个)
3. 当选择框的值更改时,将显示相应的消息.

将显示的所有文本都作为数组从数据库中读入,格式如下:

name text
id   integer
address text

然后我创建一个带有三个选项的选择框当我将选择框1的值设置为时name,显示文本消息,依此类推.

我该如何实现呢？(我希望你能得到我的想法)再次感谢你的帮助.

谢谢

Answer 1

我建议类似于以下内容:

var sel1 = document.getElementById('one'),
    sel2 = document.getElementById('two'),
    sel3 = document.getElementById('three'),
    sels = document.getElementsByTagName('select'),
    reset = document.getElementById('reset');

function disableOpts(elem) {
    for (var i = 0, len = sels.length; i < len; i++) {
        if (sels[i] != elem) {
            var opts = sels[i].getElementsByTagName('option');
            for (var c = 0, leng = opts.length; c < leng; c++) {
                if (c == elem.selectedIndex) {
                    opts[c].disabled = true;
                }
            }
        }
    }
};

sel1.onchange = function() {
    disableOpts(this);
};

sel2.onchange = function() {
    disableOpts(this);
};

sel3.onchange = function() {
    disableOpts(this);
};?

JS小提琴演示.

编辑添加消息,按照评论中的要求(我在实际问题中忽略了......):

var sel1 = document.getElementById('one'),
    sel2 = document.getElementById('two'),
    sel3 = document.getElementById('three'),
    sels = document.getElementsByTagName('select'),
    reset = document.getElementById('reset'),
    msgs = ['text','integer','boolean'];

function disableOpts(elem) {
    for (var i = 0, len = sels.length; i < len; i++) {
        if (sels[i] != elem) {
            var opts = sels[i].getElementsByTagName('option');
            for (var c = 0, leng = opts.length; c < leng; c++) {
                if (c == elem.selectedIndex) {
                    opts[c].disabled = true;
                }
            }
        }
    }
    hideMessage(elem);
};

function displayMessage(elem){
    for (var i=0,len=sels.length;i<len;i++){
        if (sels[i] == elem){
            var span = elem.parentNode.getElementsByTagName('span')[0];
            span.innerHTML = msgs[i];
            span.style.display = 'block';
        }
    }
};

function hideMessage(elem){
    for (var i=0,len=sels.length;i<len;i++){
        if (sels[i] == elem){
            var span = elem.parentNode.getElementsByTagName('span')[0];
            span.innerHTML = '';
            span.style.display = 'none';
        }
    }
};

sel1.onchange = function() {
    disableOpts(this);
};

sel2.onchange = function() {
    disableOpts(this);
};

sel3.onchange = function() {
    disableOpts(this);
};

sel1.onfocus = function() {
    displayMessage(this);
};

sel2.onfocus = function() {
    displayMessage(this);
};

sel3.onfocus = function() {
    displayMessage(this);
};

sel1.onblur = function() {
    hideMessage(this);

sel2.onblur = function() {
    hideMessage(this);
};};

sel3.onblur = function() {
    hideMessage(this);
};??

JS小提琴演示.