用js怎样获得下拉框的值?

JavaScript0116

用js怎样获得下拉框的值?,第1张

1、首先我们打开软件进入代码编辑按照图示代码先创建一个下拉框。

2、要运行后网页界面如此显示下拉框。

3、接下来我们按照图示代码用js来获取被选中的值。

4、首先我们通过selectedIndex来获得被选中的下标,再通过下标来获得值。

5、当然,如果你是用jquery的话可以按照图示代码进行设置依然可以获得下拉框的值。

   把下拉框的数据全部读出,并存放在JS的Array中。

   当选择下拉框的时候触发onChange()事件动态的添加或改变级联

   下拉框的内容。

<html>  

<script language="javascript">

 var areaArray = new Array()

  areaArray[areaArray.length]=new Array("1","杭州")

  areaArray[areaArray.length]=new Array("2","湖州")

  areaArray[areaArray.length]=new Array("3","温州")

 var townArray = new Array()

  townArray[townArray.length]=new Array("1","1","上城区")

  townArray[townArray.length]=new Array("1","2","下城区")

  townArray[townArray.length]=new Array("2","3","南浔镇")

  townArray[townArray.length]=new Array("2","4","菱湖镇")

  townArray[townArray.length]=new Array("3","5","乐清")

  townArray[townArray.length]=new Array("3","6","苍南") 

 function setTown(obj1ID,obj2ID){

        var objArea = document.getElementById(obj1ID)

        var objTown = document.getElementById(obj2ID)

        var i

        var itemArray = null

        if(objArea.value.length > 0){

             itemArray = new Array()

             for(i=0i<townArray.lengthi++){

                if(townArray[i][0]==objArea.value){

                    itemArray[itemArray.length]=new 

Array(townArray[i][1],townArray[i][2])

                }

             }

        }

        for(i = objTown.options.length  i >= 0  i--){

                objTown.options[i] = null

        }

        objTown.options[0] = new Option("请选地区")

        objTown.options[0].value = ""

 

        if(itemArray != null){

                for(i = 0  i < itemArray.length i++){

                        objTown.options[i+1] = new 

Option(itemArray[i][1])

                        if(itemArray[i][0] != null){

                           objTown.options[i].value = itemArray[i][0]

                        }

                }

        }

   } 

 

</script>

  <body>

   <table width="99%" border="0" align="center" style="border-bottom:1px 

solid #cccccc">

      <tr>

       <td width="10"><select name="areaid" id="areaid" 

onChange="setTown('areaid','townid')">

          <option value="">请选市县</option>

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

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

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

   </select>

       </td>

 <td  width="10"><select name="townid" id="townid">

    <option value="">请选地区</option>

   </select>

 </td>     

      </tr>    

   </table>

  </body>

</html>