JS聯動下拉框

時間 2021-08-15

標籤 javascript html java 數組 ide post 測試 this orm htm 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
<title>JS聯動下拉框</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<script language="javascript" >
/*
**    ==================================================================================================
**    類名：CLASS_LIANDONG_YAO
**    功能：多級連動菜單
**
**    做者：YAODAYIZI   javascript

**    ==================================================================================================
**/
function CLASS_LIANDONG_YAO(array)
{
   //數組，聯動的數據源
      this.array=array;
      this.indexName='';
      this.obj='';
      //設置子SELECT
    // 參數：當前onchange的SELECT ID，要設置的SELECT ID
      this.subSelectChange=function(selectName1,selectName2)
      {
      //try
      //{
    var obj1=document.all[selectName1];
    var obj2=document.all[selectName2];
    var objName=this.toString();
    var me=this;

    obj1.οnchange=function()
    {

        me.optionChange(this.options[this.selectedIndex].value,obj2.id)
    } html

      }
      //設置第一個SELECT
    // 參數：indexName指選中項,selectName指select的ID
      this.firstSelectChange=function(indexName,selectName)
      {
      this.obj=document.all[selectName];
      this.indexName=indexName;
      this.optionChange(this.indexName,this.obj.id) java

      }

// indexName指選中項,selectName指select的ID
      this.optionChange=function (indexName,selectName)
      {
    var obj1=document.all[selectName];
    var me=this;
    obj1.length=0;
    obj1.options[0]=new Option("請選擇",'');
    for(var i=0;i<this.array.length;i++)
    {

        if(this.array[i][1]==indexName)
        {
        //alert(this.array[i][1]+" "+indexName);
      obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]);
        }
    }
      }

}
</script>
    </head>
    <body>
    <form name="form1" method="post">

      <SELECT ID="s1" NAME="s1" >
    <OPTION selected></OPTION>
      </SELECT>
      <SELECT ID="s2" NAME="s2" >
    <OPTION selected></OPTION>
      </SELECT>
      <SELECT ID="s3" NAME="s3">
    <OPTION selected></OPTION>
      </SELECT>


      數組

      <SELECT ID="x1" NAME="x1" >
    <OPTION selected></OPTION>
      </SELECT>
      <SELECT ID="x2" NAME="x2" >
    <OPTION selected></OPTION>
      </SELECT>
      <SELECT ID="x3" NAME="x3">
    <OPTION selected></OPTION>
      </SELECT>
      <SELECT ID="x4" NAME="x4">
    <OPTION selected></OPTION>
      </SELECT>
      <SELECT ID="x5" NAME="x5">
    <OPTION selected></OPTION>
      </SELECT>

</form>
    </body> ide

9:最簡單的二個下拉菜單連動範例
<select οnchange='ok(this)' id=a><option>音樂<option>電影</select>
<select id=b>
</select>
<script>
function ok(objs){ //風雲舞
if(objs.options[objs.selectedIndex].text=="音樂")b.outerHTML="<select id=b><option selected>音樂1<option>音樂2"
if(objs.options[objs.selectedIndex].text=="電影")b.outerHTML="<select id=b><option selected>電影1<option>電影2"
}
ok(a)
</script>測試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。