当前位置：首页 » 编程语言 » 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联动相关的阅读推荐