在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小提琴演示 。

Answer 2

看一下這個插件 ，也許它可以幫到你。

對於數據而言，您可以在select上為<option>元素添加一個php foreach 。