when selecting a value from a dropdown list set other dropdown list to it's default value

Question

I have an php form which contains 7 dropdown lists. When selecting a value from one of this I want the others 6 to return to their default values if they were previously opened. I think it should be used a javascript for this but I don't now to write such a script. I guess each of this dropdown list must have an ID and when I select an option from each one of the 7 the javascript should recognise the id and sets the other to default. I tried using a javascript with document.getElementsByName('id') but it doesn't work.

<form id="form1" name="form1" method="post" action="">
 <select name="select" size="1" id="1">
  <option value="0" selected="selected">please select</option>
  <option value="1">blue</option>
  <option value="2">green</option>
  <option value="3">red</option>
 </select>
<br />
 <select name="select2" size="1" id="2">
  <option value="0" selected="selected">please select</option>
  <option value="1">intel</option>
  <option value="2">amd</option>
 </select>
<br />
 <select name="select3" size="1" id="3">
  <option value="0" selected="selected">please select</option>
  <option value="1">fish</option>
  <option value="2">car</option>
  <option value="3">table</option>
 </select>
<br />
 <select name="select4" size="1" id="4">
  <option value="0" selected="selected">please select</option>
  <option value="1">lcd</option>
  <option value="2">led</option>
 </select>
</form>

This is my form. Let's sey for example I select a value from the second dropdown list "intel". After this i select from the 3rd dropdown list a value "table". What i need to do is when selecting from the 3rd dropdownlist the second one returns to "please select". The ideea is that using a javascript i do not want those who use the form to select more than one dropdown list at a time. They should be able to see the values from each one opening the dropdown list but if they open another one the previously must return to the selected="selected" option which is "please select".

Thanks.

You mean you want to use the selected value as the value for the other dropdowns? — Chibueze Opata, Jul 03 '13 at 07:19

Hary · Accepted Answer · 2013-07-03T09:39:12.137

Here is a idea to start. Consider 2 dropdown like this.

<select id="Numeric">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

<select id="Alphabets">
   <option value="A">A</option>
   <option value="B">B</option>
   <option value="C">C</option>
</select>

Based on the value of 1st dropdown i am selecting the second dropdown

var val = document.getElementById("Numeric").value;
var obj = document.getElementById("Alphabets");


if(val == "1") obj.value = "A"
else if(val == "2") obj.value = "B"
else if(val == "3") obj.value = "C"

Switch is more better

switch(val)
{
   case("1"):
      obj.value = "A";
   break;

   case("2"):
      obj.value = "B";
   break;

   case("3"):
      obj.value = "C";
   break;
}

This is very basic starup idea. You need to implement good logics for your needed functionality

Updated Answer after Comments

<html>
<head>
    <script type="text/javascript">
     function handleSelect(thisObj){
           var list = document.getElementsByTagName("SELECT")

           for(var i=0; i< list.length; i++)
       {    
          if(list[i] ==thisObj) continue;
          list[i].value = "0";
       } 
     }
    </script>
 </head>
 <body>
      <form id="form1" name="form1" method="post" action="">
           <select name="select" size="1" id="1" onchange="handleSelect(this)">
               <option value="0" selected="selected">please select</option>
               <option value="1">blue</option>
               <option value="2">green</option>
               <option value="3">red</option>
           </select>
    <br />
           <select name="select2" size="1" id="2" onchange="handleSelect(this)">
               <option value="0" selected="selected">please select</option>
               <option value="1">intel</option>
               <option value="2">amd</option>
           </select>
    <br />
           <select name="select3" size="1" id="3" onchange="handleSelect(this)">
               <option value="0" selected="selected">please select</option>
               <option value="1">fish</option>
               <option value="2">car</option>
               <option value="3">table</option>
            </select>
    <br />
            <select name="select4" size="1" id="4" onchange="handleSelect(this)">
                <option value="0" selected="selected">please select</option>
                <option value="1">lcd</option>
                <option value="2">led</option>
            </select>
      </form>
    </body>
 </html>

Do you want the system to allow selecting only one dropdownlist at a time? Do you need this? — Hary, Jul 03 '13 at 09:10
it works just for the first dropdownlist. If i select a value from the first dropdownlist and than i select a value from the second or the 3rd or the 4th, it works very fine, it closes the first. But if i select from the second or the 3rd or the 4th it doesn't work. the system leaves all on the option that i select. It works only for the first dropdown list. Thanks for helping me — user2545307, Jul 03 '13 at 09:52
It's OK now. Thanks very very much. I forgot to set " value="0" " on the others dropdownlist. i works very well. thanks a lot. — user2545307, Jul 03 '13 at 09:58
Is it possible from your java function handleSelect(thisObj) to send a php variable ( $exemple ) ? I'm asking this beacause i want to highlight which dropdown list the user has selected by changeing the background color of the table column in which the dropdownlist is. — user2545307, Jul 03 '13 at 10:06

when selecting a value from a dropdown list set other dropdown list to it's default value

1 Answers1

Linked