快捷導(dǎo)航

JS實(shí)現(xiàn)的簡(jiǎn)單下拉框聯(lián)動(dòng)功能示例

更新時(shí)間：2018年05月11日 12:28:30 作者：Marx-link

這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單下拉框聯(lián)動(dòng)功能,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的簡(jiǎn)單下拉框聯(lián)動(dòng)功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>m.fzitv.net JS下拉聯(lián)動(dòng)</title>
<script>
function setSecond(obj){
  var val = obj.value;
  if(val == 'en'){
    var sec = document.getElementById('second');
    sec.innerHTML = "<option>one</option><option>two</option>";
  }else{
    var sec = document.getElementById('second');
    sec.innerHTML = "<option>一</option><option>二</option>";
  }
}
</script>
</head>
<body>
<div>
  <select id="first" onchange="setSecond(this)">
    <option value="en">en</option>
    <option value="zh">zh</option>
  </select>
</div>
<div>
  <select id="second">
  </select>
</div>
</body>
</html>

使用在線HTML/JS/css運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun，簡(jiǎn)單效果圖如下：

使用innerHTML，IE瀏覽器不支持這種方法的，所以改進(jìn)方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>m.fzitv.net JS下拉聯(lián)動(dòng)</title>
<script>
function setSecond(obj){
  var val = obj.value;
  if(val == 'en'){
    var sec = document.getElementById('second');
    sec.options[0] = new Option("one","one");
    sec.options[1] = new Option("two","two");
  }else{
    var sec = document.getElementById('second');
    sec.options[0] = new Option("一","one");
    sec.options[1] = new Option("二","two");//可設(shè)置循環(huán)配置，也可一個(gè)一個(gè)配置
  }
}
</script>
</head>
<body>
<div>
  <select id="first" onchange="setSecond(this)">
    <option value="en">en</option>
    <option value="zh">zh</option>
  </select>
</div>
<div>
  <select id="second">
  </select>
</div>
</body>
</html>

可以兼容火狐，IE等

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

關(guān)于ES6中數(shù)組新增的方法詳解
數(shù)組(Array)是有序的元素序列,若將有限個(gè)類型相同的變量的集合命名,那么這個(gè)名稱為數(shù)組名,下面這篇文章主要給大家介紹了關(guān)于ES6中數(shù)組新增方法的相關(guān)資料,需要的朋友可以參考下
2022-03-03
js實(shí)現(xiàn)輪播圖自動(dòng)切換
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)輪播圖自動(dòng)切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
解決javascript 全局變量失效的問題
這篇文章主要介紹了解決javascript 全局變量失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2016-04-04
electronjs實(shí)現(xiàn)打開的網(wǎng)頁(yè)密碼自動(dòng)保存功能(實(shí)現(xiàn)步驟)
在 Electron 的渲染進(jìn)程中,可以使用 webContents 對(duì)象來(lái)監(jiān)聽網(wǎng)絡(luò)請(qǐng)求,在 Electron 中實(shí)現(xiàn)自動(dòng)保存網(wǎng)頁(yè)密碼的功能涉及到幾個(gè)步驟,下面給大家分享實(shí)現(xiàn)思路,感興趣的朋友跟隨小編一起看看吧
2024-08-08
詳解小程序如何動(dòng)態(tài)綁定點(diǎn)擊的執(zhí)行方法
這篇文章主要介紹了詳解小程序如何動(dòng)態(tài)綁定點(diǎn)擊的執(zhí)行方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
chart.js實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)顯示拆線圖的效果
本文主要介紹了chart.js實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)顯示拆線圖的效果,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-11-11
如何利用JS判斷整數(shù)x是否是回文數(shù)
回文數(shù)是指正序（從左向右）和倒序（從右向左）讀都是一樣的整數(shù),下面這篇文章主要給大家介紹了關(guān)于如何利用JS判斷整數(shù)x是否是回文數(shù)的相關(guān)資料,需要的朋友可以參考下
2022-01-01
JavaScript獲取客戶端計(jì)算機(jī)硬件及系統(tǒng)等信息的方法
本文為大家詳細(xì)介紹下如何使用JavaScript獲取客戶端計(jì)算機(jī)硬件及系統(tǒng)等信息，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2014-01-01
ie下動(dòng)態(tài)加態(tài)js文件的方法
接觸過相關(guān)知識(shí)的都知道，動(dòng)態(tài)向DOM中添加js的script標(biāo)簽時(shí)，在各種瀏覽器下會(huì)有不同的表現(xiàn)。
2011-09-09
js中hasOwnProperty()方法詳解
本文主要介紹了js中hasOwnProperty()方法詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04