jquery实现二级联动

最新推荐文章于 2022-04-06 21:45:53 发布

zccst

最新推荐文章于 2022-04-06 21:45:53 发布

阅读量125

点赞数

分类专栏： Web前端-jquery-plugin 文章标签： javascript php ViewUI

本文链接：https://blog.csdn.net/zccst/article/details/84173397

版权

Web前端-jquery-plugin 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

作者：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。但是可以加单引号。