二级联动非ajax实现

二级联动非ajax实现，适合二维数组带parentId字段的数据列表，以下是直接从项目截取的相关代码：

 

html部分代码 ：

<tr>

<td colspan="2">

<select name="fatherTopicId" class="select" id="fatherTopicId" style=''>

<option value="" selected="selected">&mdash; <?php echo __('Select a Parent Help Topic');?> &mdash;</option>

<?php

if($topics=Topic::getAllPublicHelpTopics()) {

foreach($topics as $key =>$name) {

if($name['topic_pid'] == 0){

echo sprintf('<option value="%d" %s>%s</option>',

$name['topic_id'], ($info['topicId']==$name['topic_id'])?'selected="selected"':'', $name['topic']);

}

}

} else { ?>

<option value="0" ><?php echo __('General Inquiry');?></option>

<?php } ?>

</select>

<select name="topicId" class="select" id="topicId" style=''>

<option value="" selected="selected">&mdash; <?php echo __('Select a Child Help Topic');?> &mdash;</option>

<?php

foreach($topics as $key =>$name) {

if($name['topic_pid'] != 0){

echo sprintf('<option value="%d" pid="%d" style="display: none" %s>%s</option>',

$name['topic_id'],$name['topic_pid'], ($info['childTopicId']==$name['topic_id'])?'selected="selected"':'', $name['topic']);

}

}?>

</select>

<font class="error">*&nbsp;<?php echo $errors['topicId']; ?></font>

</td>

</tr>

 

js部分代码:

<script>

$(document).ready(function () {

//father topic change

$('#fatherTopicId').change(function(){

var pid = this.value;

$('#topicId').val('').find('option').each(function(i, option){

var pid1 = $(option).attr('pid');

if( pid1 == undefined){

return true;

}

option.style.display = $(option).attr('pid') == pid ? 'block' : 'none';

});

});

});

</script>

html部分代码