`
zccst
  • 浏览: 3322803 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery实现二级联动

 
阅读更多
作者:zccst
<script type="text/javascript">
$(document).ready(function(){
	var src = "<?php
$str = '';
foreach($reasons as $r){
	$str .= '[' . $r->pid . ',' . $r->id . ',' . "'{$r->content}'" .'],';
}
$str = substr($str, 0, strlen($str) - 1);
echo $str;
?>";
	src = '[' + src + ']';
	src = eval(src);
	
	var level1 = $("#os_is_timeout_reason");
	var level2 = $("#os_is_timeout_reason2");
	level1.change(function(){
		var html = "";
		for (var i = 0; i < src.length; i++){
			if( src[i][0] == level1.val()){
				html += '<option value='+src[i][1]+'>'+src[i][2]+'</option>';
			}else if( 0 == level1.val()){
				html = '<option>--请选择子原因--</option>';
			}
		}
		level2.html(html);
	});
});
</script>
<?php //var_dump($reasons); ?>
<select id="os_is_timeout_reason">
	<option value="0">--请选择原因--</option>
	<?php 
		foreach($reasons as $r){ 
			if($r->pid == 0){
				?><option value="<?php echo $r->id; ?>">
					<?php echo $r->content; ?>
				</option>
	<?php }} ?>
</select>

<select id="os_is_timeout_reason2">
	<option>--请选择子原因--</option>
</select>



批注:
1,手工拼接javascript中的二维数组
$str .= '[' . $r->pid . ',' . $r->id . ',' . "'{$r->content}'" .'],';
src = '[' + src + ']';//此时还是字符串
src = eval(src);


2,使用了jquery的$("#id").html(html);
其中,html是拼接的标签。


3,php中的"'{$r->content}'"表达方式。

其中"{$r->content}"等同于$r->content。但是可以加单引号。
分享到:
评论

相关推荐

    原生AJAX或jQuery实现二级联动选择以及解析XML和JSON数据格式

    本篇博客主要探讨如何利用这两者实现二级联动选择,即当用户在一级选择中作出选择时,二级选择会自动更新,以及如何解析XML和JSON数据格式。下面我们将详细探讨这些知识点。 首先,原生AJAX是通过JavaScript直接与...

    jquery 省市二级联动

    一段很简单的代码实现的全国二级城市联动选择效果 代码部分很简单,看过即会使用 主要字段内容在city.data.js中,如果需要修改城市名称,到里面找到对应的文字修改,或者添加即可

    基于jquery实现二级联动效果

    在网页开发中,二级联动效果通常用于实现如地区选择、分类筛选等功能,使得用户能够根据一级选项选择相应的二级选项。本实例将详细讲解如何利用jQuery库来实现这种效果。 首先,我们来看一下给出的HTML代码片段。在...

    jQuery省市二级联动关联店面查询表单代码

    在这个“jQuery省市二级联动关联店面查询表单代码”项目中,开发者利用jQuery实现了用户友好的店面查询功能,特别适用于网络营销场景,帮助用户快速找到连锁店铺的全国网点。 首先,我们要理解“省市二级联动”的...

    jquery二级联动下拉列表

    下面我们将深入探讨如何利用jQuery实现二级联动下拉列表。 首先,我们需要了解什么是二级联动下拉列表。它是由两个或多个下拉列表组成,当用户在一个下拉列表中选择一个选项时,另一个下拉列表的内容会根据前者的选...

    jQuery移动端省市二级联动选择插件.zip

    "jQuery移动端省市二级联动选择插件"是专为解决这个问题而设计的一个工具,它利用JavaScript和jQuery库,提供了高效、易用的解决方案。这个插件允许用户在手机或平板设备上方便地选择省份和城市,极大地提升了用户...

    ajax+jquery二级联动实现

    在本文中,我们将深入探讨如何使用AJAX和jQuery来实现二级联动效果,特别是在网页表单中,例如选择籍贯的省份和城市。二级联动是指在一个下拉列表的选择触发后,另一个下拉列表自动填充相关数据。在这个例子中,当...

    jquery 二级联动

    本文将深入探讨“jQuery 二级联动”这一主题,它通常指的是在网页中实现下拉菜单或者选择框之间的联动效果,例如在地区选择时,选择省份后自动更新城市的下拉列表。 首先,我们要理解jQuery的基础知识。jQuery库的...

    jquery select二级联动菜单

    本话题主要关注的是使用jQuery实现的二级联动下拉菜单,这是一种常见的交互设计,常用于网站的筛选或导航功能。下面将详细介绍这种二级联动菜单的实现原理、步骤以及相关的jQuery知识。 首先,联动菜单的基本概念是...

    Jquery实现的的动态无刷新的二级联动菜单

    在本示例中,我们探讨的是如何利用jQuery实现一个无刷新的二级联动菜单,这涉及到jQuery库、AJAX异步请求以及JSON数据解析等多个关键知识点。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理...

    二级联动下拉菜单实例

    以下是一个简单的jQuery实现二级联动下拉菜单的示例: ```html 请选择 &lt;!-- 一级菜单选项 --&gt; 请选择 &lt;!-- 二级菜单选项 --&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; $...

    jquery二级联动菜单

    java结合jquery进行异步提交在jsp页面中实现二级联动菜单,该源码在struts+mvc基础上实现的,简单明了。其中的数据库可自行更改,只要相应的更改连库字符串等即可。也可多加几个下拉框将项目扩展为多级联动菜单

    利用JQuery制作简单二级联动

    本篇文章将详细讲解如何利用jQuery实现一个简单的二级联动效果,这个效果常见于下拉菜单或者地区选择器中,当用户在一级菜单中选择一个选项时,二级菜单会相应地展示与之相关的子选项。 首先,我们需要了解联动的...

    jquery解析xml并实现二级联动

    本主题将深入探讨如何使用jQuery解析XML数据,并利用这些数据实现省市二级联动的效果。这种功能常见于地理选择,用户在选择省份后,下拉菜单会自动更新展示对应省份的城市选项。 首先,我们需要理解XML(Extensible...

    jquery实现的水平三级联动

    在IT领域,尤其是在网页开发中,"jQuery实现的水平三级联动"是一种常见的交互设计,用于增强用户界面的交互性和信息的层次展示。本知识点主要涉及jQuery库的使用、HTML结构设计、CSS样式调整以及JavaScript事件处理...

    二级联动下拉框

    在网页设计和开发中,"二级联动下拉框"是一种常见的交互元素,它通常用于实现多级选择或者关联数据的筛选。例如,在选择省份时,第一个下拉框会选择省份,当选择一个省份后,第二个下拉框会动态加载并显示该省份的...

    jquery城市二级联动

    "jQuery城市二级联动"就是利用JavaScript库jQuery实现这一功能的技术。 jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。jQuery的语法设计使得开发者可以更加...

Global site tag (gtag.js) - Google Analytics