js 使用form表单select类实现级联菜单效果

  用例如下:

  

复制代码 代码如下:

  <form name="form1" method="POST" action="--WEBBOT-SELF--">

  <select id="select1" onchange="select1onchange()">

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

  </select>

  </form>

  我建议要设定每个option的value值,来标示用户在选用时具体是哪一项。

  在javascript中使用document.getElementById("select1").value;或者form1.select1.value;

  则可得到所选的值是多少。

  使用onchange事件,触发条件是select的option值改变。

  使用级联菜单时

  建立两个select,他们的id分别是select1,select2。

  为select1创建触发函数javascript函数,select1onchange(),在此函数中,得到select1的值,

  查表得到相对应的select2的值,并为select2添加相应的选项,即可达到级联效果。

  

复制代码 代码如下:

  <select id="select1" onchange="select1onchange()">

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

  </select>

  <select id="select2" onchange="select2onchange()">

  </select>

  function t1onfocus()

  {

  document.getElementById("p1").innerHTML="获得焦点";

  }

  function select1onchange()

  {

  var i;

  for (i=10;i>=0;i--)

  form1.select2.remove(i);

  var objOption;

  for (i=0;i<=9;i++)

  {

  objOption=document.createElement("OPTION");

  objOption.text=form1.select1.value*10+i;

  objOption.value=form1.select1.value*10+i;

  form1.select2.options.add(objOption);

  }

  }

  function select2onchange()

  {

  p1.innerHTML=form1.select2.value; //p1是文档中用于输出的自定义的项。

  }