很簡單的js下拉框聯動
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</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>
簡單效果圖：javascript
使用innerHTML，IE瀏覽器不支持這種方法的，因此改進方法：html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</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");//可設置循環配置，也可一個一個配置
}
}
</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>
__________________________________________________________________java
我寫的task7瀏覽器
function setSecond(obj){
var val = obj.value;
if(val == '中國'){
var sec = document.getElementById('province');
sec.options[0] = new Option("北京","one");
sec.options[1] = new Option("天津","two");
}else{
var sec = document.getElementById('province');
sec.options[0] = new Option("one","one");
sec.options[1] = new Option("two","two");//可設置循環配置，也可一個一個配置
}
}
function setSecond1(obj){
var val = obj.value;
if(val == '北京'){
var sec = document.getElementById('city');
sec.options[0] = new Option("朝陽","one");
sec.options[1] = new Option("海淀","two");
}else if(val == '天津'){
var sec = document.getElementById('city');
sec.options[0] = new Option("南開","one");
sec.options[1] = new Option("河西","two");//可設置循環配置，也可一個一個配置
}
}
<form>
<div class="select">
<select name="country" onchange="setSecond(this)">
<option value="" selected="selected">國家</option>
<option value="中國">中國</option>
</select>
</div>
<div class="select">
<select id="province" onchange="setSecond1(this)">
<option value="北京" selected="selected">北京</option>
<option value="天津">天津</option>
</select>
</div>
<div class="select">
<select id="city">
</select>
</div>
<button type="submit" id="submit">搜 索</button>
</form>
相關文章
- 1. JS聯動下拉框
- 2. 一個很好的JS,ASP二級下拉框聯動。
- 3. 下拉框聯動
- 4. js實現多級聯動下拉框
- 5. Excel2007製作簡單級聯下拉框
- 6. jq實現簡單的二級聯動下拉框
- 7. 如何寫動態的聯動下拉框,4聯動下拉框
- 8. fastadmin 下拉框聯動
- 9. Ajax 下拉框聯動
- 10. js實現簡單的下拉菜單
- 更多相關文章...
- • ionic 下拉刷新 - ionic 教程
- • ionic 單選框 - ionic 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. JS聯動下拉框
- 2. 一個很好的JS,ASP二級下拉框聯動。
- 3. 下拉框聯動
- 4. js實現多級聯動下拉框
- 5. Excel2007製作簡單級聯下拉框
- 6. jq實現簡單的二級聯動下拉框
- 7. 如何寫動態的聯動下拉框,4聯動下拉框
- 8. fastadmin 下拉框聯動
- 9. Ajax 下拉框聯動
- 10. js實現簡單的下拉菜單