當前位置：首頁 » 編程語言 » html聯動

html聯動

發布時間: 2021-03-06 05:40:09

① 一個html有兩個城市聯動

沒看到代碼，應該有行用來綁定的吧，復制一下，id什麼換一下就好了

② html中怎麼用javascript做聯動菜單、

function sel(){ var s1=document.getElementById("sel1");var s2=document.getElementById("sel2"); for(var i=0;i<3;i++){ var option=new Option(s1.value+i+1); s2.options[i]=option;}} <select id="sel1" onchange="sel()"> <option value=1>1</option><option value=2>2</option> </select><select id="sel2" > </select> 我寫了個大體的意思，沒有驗證級聯的關健就是在函數里的賦值。動態添加過程。

③ html 如何做一個二級聯動的下拉表單(select)

<!doctype html><html><head><meta charset="utf-8"><title>聯動</title></head><body><select id="s1" onChange="move()">
<option selected value="s1">-- 請選擇 --</option>

<option value="SC">SC</option>
<option value="BJ">BJ</option>
<option value="TJ">TJ</option></select><select id="s2">
<option selected>-- 請選擇 --</option>
</select><script>
function move()
{
var s1=document.getElementById("s1"); var s2=document.getElementById("s2"); 
var add;
if(s1.value=="SC")
{
add=new Array("CD","DZ","MY","NC"); 
}else if(s1.value=="BJ")
{
add=new Array("HD","CY","WFJ");
}else if(s1.value=="TJ")
{
add=new Array("TJG","TJ","TJY"); 
}else if(s1.value=="s1")
{
add=new Array("請選擇");
}
else
{
add=null; 
}

s2.length=0;
for(var i=0;i<add.length;i++) { var ss=new Option(); ss.text=add[i].split()[0];

s2.add(ss);

}

}</script></body></html>

④ html怎麼做左右聯動菜單

關鍵在抄於
下級菜襲單平時 display:none
而當上級菜單的超鏈接被滑鼠放上時即 a:hover，
下級菜單 display:block
比如下級菜單的class 是 submenu, 上級菜單 menu
.submenu { display:none; } 平時隱藏
.menu a:hover .submenu {display:block;}
要保證每個.submenu是a 的子元素

⑤ html怎麼讓多個input標簽進行關聯

你好，這個效果類似省市區三級聯動，網上有很多源碼，可以下載一個改一下。

總之這個效果需要js來做，只用html做不了的。

⑥ html五級聯動下拉框

按說這種操作應該是後台程序來做，前端操作的話有點窒息，主要是數據量。。親測有效，望點贊！

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>無標題文檔</title>
<linkrel="stylesheet"type="text/css"href="CSS3/xuanxing.css"/>
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
</head>
<body>
<style>
select{width:75px;font-size:12px;color:#000000;font-family:'宋體';margin:auto0px;}
#select0{background:yellow;}
.select{background:#85e785;}
</style>
<script>
$(document).ready(function(e){
	$("select#select0").change(function(){
		varcc=$(this).find("option:selected").attr("class");
		$(this).siblings("select").find("option").hide();
		$(this).siblings("select").find("option."+cc).show();
		$(this).siblings("select").find("option."+cc+":first").attr("selected","selected");
	});
	$("select.select").change(function(){
		varcid=$(this).find("option:selected").index();
		$(this).siblings("select.select").each(function(){
			$(this).find("option").eq(cid).attr("selected","selected");
		});
	});
});
</script>
<divstyle="width:400px;height:20px;margin:0auto;word-spacing:0px;">
	<selectid="select0">
		<optionclass="op0">10mm</option>
		<optionclass="op1">20mm</option>
		<optionclass="op2">40mm</option>
	</select>
	<selectclass="select">
		<optionclass="op0">8n</option>
		<optionclass="op0">12n</option>
		<optionclass="op0">16n</option>
		<optionclass="op1">24n</option>
		<optionclass="op1">28n</option>
		<optionclass="op1">32n</option>
		<optionclass="op2">40n</option>
		<optionclass="op2">44n</option>
	</select>
	<selectclass="select">
		<optionclass="op0">70mm</option>
		<optionclass="op0">110mm</option>
		<optionclass="op0">150mm</option>
		<optionclass="op1">230mm</option>
		<optionclass="op1">270mm</option>
		<optionclass="op1">310mm</option>
		<optionclass="op2">390mm</option>
		<optionclass="op2">430mm</option>
	</select>
	<selectclass="select">
		<optionclass="op0">128mm</option>
		<optionclass="op0">190mm</option>
		<optionclass="op0">230mm</option>
		<optionclass="op1">310mm</option>
		<optionclass="op1">350mm</option>
		<optionclass="op1">390mm</option>
		<optionclass="op2">470mm</option>
		<optionclass="op2">510mm</option>
	</select>
	<selectclass="select">
		<optionclass="op0">ESA0810</option>
		<optionclass="op0">ESA1210</option>
		<optionclass="op0">ESA1610</option>
		<optionclass="op1">ESA2410</option>
		<optionclass="op1">ESA2810</option>
		<optionclass="op1">ESA3210</option>
		<optionclass="op2">ESA4010</option>
		<optionclass="op2">ESA4410</option>
	</select>
</div>
</body>
</html>
<!---->

⑦ html js 聯動

我這里只寫了兩個聯動，其實第三個也是一樣的，都是同樣的方式，至於動態添加的數據也很簡單，直接從後台接收就可以了，希望能幫到你
<div class="panel">
<table class="table table-bordered ui-widget-content">
<tbody>
<tr>
<td style="width: 30%; text-align: center;">階段：</td>
<td style="width: 70%; background-color: #FFFFFF;">
<select name="templatePhase" class="input" id="templatePhase" onchange="phaseTypeName(this.selectedIndex)">
<option value="0" >請選擇</option>
</select>
</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;">階段類型：</td>
<td style="width: 70%; background-color: #FFFFFF;">
<select name="phaseType" class="input" id="phaseType" >
<option value="0" >請選擇</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//階段名稱
var phaseName = ["立項設計","采購","啟動准備","到貨","實施","割接上線","初驗","終驗"];
//立項設計類型
var phaseType1 = ["立項","可研","設計"];
//采購設計類型
var phaseType2 = ["采購"];
//啟動准備類型
var phaseType3 = ["啟動","項目計劃"];
//到貨類型
var phaseType4 = ["到貨"];
//實施類型
var phaseType5 = ["實施"];
//割接上線類型
var phaseType6 = ["割接"];
//初驗類型
var phaseType7 = ["初驗"];
//終驗類型
var phaseType8 = ["終驗"];
$(function(){
var e = $("select[name = templatePhase]");
for (var i=0; i<phaseName.length; i++) {
e.append("<option value="+phaseName[i]+">"+phaseName[i]+"</option");
}
});
function phaseTypeName(n)
{
var e = $("#phaseType");
for (var i=e.find("option").length; i>0; i--) {
$("#phaseType option[index = "+i+"]").remove();
}
if (n == 0) {
return;
}else{
var a = eval("phaseType"+ n); //得到階段類型的數組名
for (var i=0; i<a.length; i++){
e.append("<option value="+a[i]+">"+a[i]+"</option>");
};
}

}
</script>

⑧ html 中如何實現ajax 二級聯動

引入jquery來幫助你實現.比較簡單.給你一個例子吧.後台是用php寫的.
html文件內容
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" ></meta>
<head>
<title>
demo
</title>

<script src="jquery.js" type="text/javascript"></script>

<script>
function getarea(){
var region_id = $("#region").val();//獲得下拉框中大區域的值

if(region_id != ''){
$.ajax({
type: "post",
url: "b.php",
data:"region_id="+region_id,
cache:false,
beforeSend: function(XMLHttpRequest){
},
success: function(data, textStatus){

//alert(data);
$("#area").empty();//清空area下拉框
$("#area").append(data);//給area下拉框添加option

},
complete: function(XMLHttpRequest, textStatus){
},
error: function(){
//請求出錯處理
}
});
}

}
</script>
</head>
<body>
<div >
<table class='itable' width='100%' id='timetable' >
<tr>
<td class="test_c" id="one">
<select id="region" name="region" onchange="getarea();">
<option value="">請選擇</option>
<option value="1">東北</option>
<option value="2">華北</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="area" name="area">

</select>
</td>
</tr>
</table>

</div>
</body>
</html>

=============
b.php內容
<?php
$region_id = $_POST['region_id'];
//根據前台傳過來的region_id來處理下拉框的內容.
//這里演示直接輸出,你可以從資料庫中讀出來組織後再輸出.

switch($region_id){
case 1:{
$area_option = "<option value='1'>遼寧</option><br><option value='2'>吉寧</option><br><option value='3'>黑龍江</option>";
echo $area_option;
break;
}

case 2:{
$area_option = "<option value='4'>北京</option><option value='5'>天津</option><option value='6'>河北</option>";
echo $area_option;
break;
}

}
?>

⑨ 什麼是html5純CSS的三級聯動級聯菜單

給你一個JQ的三級聯動：
<!doctypehtml>
<html>
	<head>
		<title></title>
		<metacharset="utf-8"/>
</head>
<style>
	
</style>
<body>

<selectid="one">
	<optionvalue="">請選擇省份</option>		
</select>

<selectid="two">
	<optionvalue="">請選擇城市</option>
</select>

<selectid="three">
	<optionvalue="">請選擇區域</option>
</select>
	
<scripttype="text/javascript"src="js/jquery-1.12.0.js"></script>
<scripttype="text/javascript">
	/*
		1.搭建框架
		2.給省份和城市綁定change事件
				
			
	*/

$(function(){
	varprovince=[
		{"name":"廣東省",
			"city":[
				{
					"name":"廣州市",
					"area":["越秀區","荔灣區","海珠區","天河區,白雲區"]
				},
				{
					"name":"深圳市",
					"area":["福田區","羅湖區","南山區","寶安區","龍崗區"]
				}
			]
		},
		{"name":"浙江省",
			"city":[
				{
					"name":"杭州市",
					"area":["上城區","下城區","江干區","西湖區"]
				},
				{
					"name":"麗水",
					"area":["蓮都區","松陽縣","遂昌縣","雲和縣"]
				}
			]
		},
		{"name":"江西省",
			"city":[
				{
					"name":"南昌市",
					"area":["東湖區","西湖區","青雲譜區","灣里區"]
				},
				{
					"name":"九江市",
					"area":["潯陽區","廬山區","瑞昌市","九江縣"]
				},
				{
					"name":"贛州市",
					"area":["章貢區","南康區","上猶縣","贛縣"]
				}
			]
		},
	];

	//二級聯動
	$("#two").change(function(){
		varone_index=$("#oneoption:selected").index();
		vartwo_index=$("#twooption:selected").index();
		varthree=$("#three");
		three.empty().append("<option>請選擇區域</option>");

		if(two_index>0){
			vararea=province[one_index-1].city[two_index-1].area;
			for(vari=0;i<area.length;i++){
				three.append("<option>"+area[i]+"</option>");
			}
		}
	});

	//一級聯動
	$("#one").change(function(){
		varone_index=$("#oneoption:selected").index();
		vartwo=$("#two");
			console.log(one_index)
		two.empty().append("<option>請選擇城市</option>");
		$("#three").empty().append("<option>請選擇區域</option>");//清除

		if(one_index>0){
			varcity=province[one_index-1].city;
			console.log(province[one_index-1].city)
			for(vari=0;i<city.length;i++){
				two.append("<option>"+city[i].name+"</option>");
			}
		}
	});

	
	init();
	functioninit(){
		for(vari=0;i<province.length;i++){
			$("#one").append("<option>"+province[i].name+"</option>");
		}
	}
});
</script>
</body>
</html>

閱讀全文

html聯動

與html聯動相關的閱讀推薦