从下拉列表中选择一个值时,将其他下拉列表设置为默认值

时间:2013-07-03 07:15:43

标签: php javascript

我有一个包含7个下拉列表的php表单。当从其中一个中选择一个值时,我希望其他人6返回到之前打开的默认值。我认为应该使用javascript,但我现在不写这样的脚本。我猜这个下拉列表中的每一个都必须有一个ID,当我从7中的每一个中选择一个选项时,javascript应该识别id并将另一个设置为默认值。我尝试使用document.getElementsByName('id')的javascript,但它不起作用。

<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>

这是我的表格。 让我们举个例子,我从第二个下拉列表“intel”中选择一个值。在此之后,我从第3个下拉列表中选择一个值“table”。我需要做的是从第3个下拉列表中选择第二个返回“请选择”。 想法是使用javascript我不希望那些使用表单的人一次选择多个下拉列表。 他们应该能够看到每个打开下拉列表的值,但是如果他们打开另一个,则之前必须返回到选中的=“选中”选项,即“请选择”。

感谢。

1 个答案:

答案 0 :(得分:0)

这是一个开始的想法。考虑这样的2下拉。

<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>

根据第一个下拉列表的值,我选择第二个下拉列表

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(val)
{
   case("1"):
      obj.value = "A";
   break;

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

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

这是非常基本的明星想法。您需要为所需的功能实现良好的逻辑

更新评论后的答案

<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>