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.

6 Years
Discussion Span
Last Post by thijscream

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

	if ($('input:radio[name=Shrt]:checked').val())
	    ...do something


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.

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--) {
    // 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

// 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 id="sel2">
  <option value=0>Val 1 I</option>
  <option value=1>Val 2 I</option>
  <option value=2>Val 3 I</option>

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.