当前位置: 代码迷 >> Web前端 >> jquery兑现二级联动
  详细解决方案

jquery兑现二级联动

热度:89   发布时间:2012-11-08 08:48:11.0
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。但是可以加单引号。
  相关解决方案