Implement a dynamic selectbox in html

Question

I am trying to develop a select box so that I can change the selected option dynamically

e.g.

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

There are three select boxes. The first select box provide three options.

1. when select box 1 is selected, the other select boxes will have only 2 options (excluding the selected one)
2. When select box 2 is selected, the other select boxes will have only 1 option (excluding the selected two)
3. When a select box's value changes, the appropriate message is displayed.

All of the text that will be displayed is read in from a database as an array in the following format:

name text
id   integer
address text

Then I create a select box with the three option When I set select box 1's value as name, the text message is displayed, and so on.

How should I implement this? (I hope you get my idea) Thank you again for your help.

Thank you

Answer 1

I'd suggest something akin to the following:

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 Fiddle demo.

---

Edited to add the messages, as requested in comments (which I overlooked in the actual question...):

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 Fiddle demo.

Answer 2

Take a look at this plugin, maybe it can help you.

For the data than you can put a php foreach for the <option> element on the select.