[SOLVED] Change All Values

[Daney11]

Hi Guys,

 

Say i have a select box at the top of my page

 

<select class="shoutbox"> 
<option selected>---</option> 
<option value=1>1</option>
<option value=2>2</option>
</select>

 

Then i have outputted all users from my database in a php script

 

<select name="access" class="shoutbox">
<option value=1 selected>1</option>
<option value=2>2</option>
</select>

 

How could i create a javascript peice of code, so that when i select a value in the top form... It changes all the forms that i have outputted from the users database to the value of what i choose?

 

Thanks guys.

[obsidian]

Since you have all the select boxes with a uniform class, you can access them that way. If you put this at the top of your page, you shouldn't have to change your markup at all, either:

window.onload = function() {
  eles = document.getElementsByTagName('select');
  for (i = 0; i < eles.length; i++) {
    if (eles[i].className == 'shoutbox') {
      eles[i].onchange = funciton() {
        x = this.selectedIndex;
        ele = document.getElementsByTagName('select');
        for (i = 0; i < ele.length; i++) {
          if (ele[i].className == 'shoutbox') ele[i].selectedIndex = x;
        }
      };
    }
  }
}

 

I haven't fully tested it, but I believe that will fix it for you as long as all your selects have the "shoutbox" class applied to them.

 

Good luck!

[Daney11]

Thanks for the reply mate. Ive put that code in and it doesnt change the boxes at all mate.

[obsidian]

Thanks for the reply mate. Ive put that code in and it doesnt change the boxes at all mate.

 

Ah, I had some of my javascript referencing confused (That's what I get when I switch between languages). Try this instead for your javascript code. I've tested this one, and it seems to work well:

window.onload = function() {
  eles = document.getElementsByTagName('select');
  for (i = 0; i < eles.length; i++) {
    if (eles[i].className == 'shoutbox') {
		obj = eles[i];
		obj.onchange = setMyIndex;
    }
  }
};

function setMyIndex() {
x = this.selectedIndex;
ele = document.getElementsByTagName('select');
for (i = 0; i < ele.length; i++) {
	if (ele[i].className == 'shoutbox') ele[i].selectedIndex = x;
}
}

[Daney11]

That code works mate, however

 

<select class="shoutbox"> 
<option selected>---</option> 
<option value=1>1</option>
<option value=2>2</option>
</select>

 

<select name="access" class="shoutbox">
<option value=1 selected>1</option>
<option value=2>2</option>
</select>

 

As you can see at the top i have a value of "---" "1" and "2" which is the one that can change them all.  But when i drop down and select value 1, it changes all the values below to value 2, which is wrong and confusing hehe. Any ideas mate?

 

Thanks a lot again

 

Dane

 

[obsidian]

Are you only wanting your first dropdown to be the one that changes the rest? I understood it that you wanted all the dropdowns to change all the other ones. If you want to do it a little more "loosely" by selecting the values that have been changed, you can do this (replace the second javascript function with this:

function setMyIndex() {
  myVal = this.options[this.selectedIndex].value;
  ele = document.getElementsByTagName('select');
  for (i = 0; i < ele.length; i++) {
    if (ele[i].className == 'shoutbox') {
      obj = ele[i];
      for (x = 0; x < obj.options.length; x++) {
        if (obj.options[x].value == myVal) obj.selectedIndex = x;
      }
    }
  }
}

[Daney11]

perfect, thankyou very much for helping me

 

Dane