i'm having 2 select boxes, if i change the first one i would like a 2nd select box to change the content, everything is comming from a database. not xml because i want everything to be stored in a database for. is this possible with an onchange command or something?
any tutorial maby?
can't find something that suits my solution but i know it has to be simple.

Recommended Answers

All 3 Replies

suppose you have four select boxes

<input type="radio" id="rad1" name="Shrt" value="One" />
<input type="radio" id="rad2" name="Shrt" value="Two" />
<input type="radio" id="rad3" name="Shrt" value="Three" />
<input type="radio" id="rad4" name="Shrt" value="Four" />

For handling any click event for these select use the following code

$("'input:radio[name=Shrt]").click(
function()
{
	if ($('input:radio[name=Shrt]:checked').val())
	{
	    ...do something
	}

}
);

@six_sic6
Please do not feel offended here. Anyway You may need to state that your code requires JQuery library or it won't work. Also, I believe that he is asking for combo box, not radio button??? The principle is similar, but it is not exactly the same.

@thijscream
A sample of raw JavaScript is below...

// javascript part
// global variable
// must ensure that this array value must match the sel1Element in the HTML
var sel1Options = [["Val 1 I", "Val 2 I", "Val 3 I"], ["Val 1 II", "Val 2 II", "Val 3 II"], ["Val 1 III", "Val 2 III", "Val 3 III"]]
function changeSel2(sel1Element, sel2ID) {
  var sel2Element = document.getElementById(sel2ID)
  if (sel1Element && sel2Element) {  // ensure that both elements exist
    // remove all sel2Element options here
    // there are other ways which could be faster & safer, but I just show
    // a simple way to do it here
    for (var i=sel2Element.children.length-1; i>=0; i--) {
      sel2Element.children[i].parentNode.removeChild(sel2Element.children[i])
    }
    // populate the element to sel2Element options
    var sel1Set = sel1Options[sel1Element.selectedIndex]
    var newElem
    for (var i=0; i<sel1Set.length; i--) {
      newElem = document.createElement("option")
      newElem.value = i
      newElem.innerHTML = sel1Set[i]  // you may create a text node instead
      sel2Element.appendChild(newElem)
    }
  }
}

// html part
<select id="sel1" onchange="changeSel2(this, 'sel2')">
  <option value=0>Selection 1</option>
  <option value=1>Selection 2</option>
  <option value=2>Selection 3</option>
</select>
<br/>
<select id="sel2">
  <option value=0>Val 1 I</option>
  <option value=1>Val 2 I</option>
  <option value=2>Val 3 I</option>
</select>

thanks alot will try this all out and mark it solved if it is :)
thanks again :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.