js動態添加select菜單 聯動菜單

來源:互聯網
上載者:User

標籤:javascrip   搬家   baidu   margin   add   hang   onchange   ==   meta   

原文發布時間為:2009-11-14 —— 來源於本人的百度文章 [由搬家工具匯入]

<html>

<head>

<title>http://hi.baidu.com/handboy</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<style>

<!--

body          { font-size: 14px }

-->

</style>

</head>

<body bgcolor=#FFFFFF alink=#333333 vlink=#333333 link=#333333 topmargin=0 leftmargin=0>

<form>

<script language="javascript">

<!--

function LoandCity(provinceID)

{

switch (provinceID)

{

    //

   case "1":

   //清空select

    document.getElementById("city").options.length=0;

   //添加SELECT 这个地方我们可以自己调用数据里面的数据

    document.getElementById("city").options.add(new Option("宣武区","1"));

    document.getElementById("city").options.add(new Option("海淀区","2"));

  

    break

   case "2":

    document.getElementById("city").options.length=0;

    document.getElementById("city").options.add(new Option("黄浦区","1"));

    document.getElementById("city").options.add(new Option("闸北区","2"));

    break

   default:

    alert("错误类型");

    break

  

}

}

-->

</script>

<body>

<form name="form1" >

<select id="province" onChange = "LoandCity(this.value);">

<!--这个地方我们可以自己调用数据库里面的省份-->

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

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

</select> 城市 <select id="city" ></select><br>
<script type="text/javascript">LoandCity('1');</script>
</form>

</body>

</html>

可能会遇见一些问题,可以见这篇文章回发或回调参数无效 “HtmlSelect”不能有类型为“LiteralControl”的子级

=====================

1 检测是否有选中

if (objSelect.selectedIndex > - 1 ) {

// 说明选中

} else {

// 说明没有选中

}

2 删除被选中的项

objSelect.options[objSelect.selectedIndex] = null ;

3 增加项

objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );

4 修改所选择中的项

objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );

5 得到所选择项的文本

objSelect.options[objSelect.selectedIndex].text;

6 得到所选择项的值

objSelect.options[objSelect.selectedIndex].value;

js動態添加select菜單 聯動菜單

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.