Select drop down html

Question

I have a main select "main", and a list from 2 till 9, depending the situation, of more selects. What if I want to change the value in all this secondary selects, with the same value that the main select?. So the main select will change more than 1 select at the same time: So, I have got the main select:

<select name="main" id="main" onchange="document.getElementById('item').value = document.getElementById('main').value">
  <option value = p>Please Select</option>
  <option value = b>BOOK</option>
  <option value = d>DVD</option>
</select>

And the next selects are made in php inside a loop, so I will have 2,3,4,5,..,9 selects depending the situation. Each of them with a different name (because I use this name in POST)

<select name=item_".$itemnumber." id="item">
 <option value = p>Please Select</option>
 <option value = b>BOOK</option>
 <option value = d>DVD</option>
</select>

With this I want to have the possibility to select in one time the option for all the selects, but maintaining the possibility to change only some of the selects.

Answer 1

Hi,

I don't see any question marks.

The only issue I see is that you should use .selectedIndex instead of .value.

jQuery solution:

$(".selectorClass").each(function(index, selectorToUpdate){
    selectorToUpdate.selectedIndex = $('#main').selectedIndex;
});

Put this in a function and call that function for onchange.

Regards, Alin

Answer 2

What I understand is, you have a <select> dropdown, and on change of the text in this one, you want to change the the selection in one or more of other dropdowns on your screen. Am I right?

If this is the case, then you have to have a javascript function and call this in the onchange of the <select>.
In this javascript function, you have to set the selected value of all the dropdowns you want.

If this is not what you want, Can you please rephrase your question and tell us what you exactly you want?

EDIT

         function setElement()
         {
               var selectedValue = document.getElementById("main").value;
               selectThisValue(document.getElementById("child1"), selectedValue);
               selectThisValue  (document.getElementById("child2"), selectedValue);
         }

        function selectThisValue(selectElement, val) 
        {
           for ( var i = 0; i < selectElement.options.length; i++ )
           {
              if ( selectElement.options[i].value == val )
              {
                 selectElement.options[i].selected = true;
                 return;
              }
           }
        }

Call setElement() in your onchange of the main. This function gets the selected item from the main <select> and selects the items in the other dropdowns that have the same value.
You call the selectThisValue function once for every select you need to change.
Change the ids as per your code.

Answer 3

I made it work like that:

 function changeValue(theElement) {
    var theForm = theElement.form, z = 0;
    for(z=0; z<theForm.length;z++){
        if(theForm[z].id == 'item' && theForm[z].id != 'main'){
            theForm[z].selectedIndex = theElement.selectedIndex;
        }
    }
}

But I dont know if thats the best way, I heard here that jQuery would be easier, so I would like to know how to make it in jQuery, please.

Answer 4

Never put the same id in all the select elements... ID is supposed to be unique for elements in a page. change your html to look like

<select id="main" class="master">....</select>
<select id="test1" class="child">....</select>
<select id="test2" class="child">....</select>
<select id="test3" class="child">....</select>
<select id="test4" class="child">....</select>

Class attribute for multiple elements can be the same.

Your function needs to be modified to look like this (i havent tested this, but should work..)

 function changeValue(theElement) {
    var theForm = theElement.form, z = 0;
    for(z=0; z<theForm.length;z++){
        if(theForm[z].className == 'child'){
            theForm[z].selectedIndex = theElement.selectedIndex;
        }
    }
}

by the way, do the options inside these select boxes vary? if so, you'll have to match by value rather than index

EDIT: here's the code i wrote later.. modify it to suit your need

<html>
<head><title>select change cascade</title></head>
<body>
<select id="main" class="master"><option value="1">book</option><option value="2">cd</option></select>
<select id="test1" class="child"><option value="1">book</option><option value="2">cd</option></select>
<select id="test2" class="child"><option value="1">book</option><option value="2">cd</option></select>
<select id="test3" class="child"><option value="1">book</option><option value="2">cd</option></select>
<select id="test4" class="child"><option value="1">book</option><option value="2">cd</option></select>
<script type="text/javascript" src="./selectchange.js"></script>
</body>
</html>

and in selectChange.js

var main = document.getElementById("main");
main.onchange = function (){
    sels = document.getElementsByTagName("select");
    for(z=0; z<sels.length;z++){
        if(sels[z].className == 'child'){
            sels[z].selectedIndex = this.selectedIndex;
        }
    }   
}