二级联动非ajax实现

二级联动非ajax实现,改改就能用。
 
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';
});
});
 
//child topic change
$('#topicId').change(function(){
var data = $(':input[name]', '#dynamic-form').serialize();
$.ajax({
url:'ajax.php/form/help-topic/' + this.value,
data:data,
dataType: 'json',
success: function(json) {
$('#dynamic-form').empty().append(json.html);
$(document.head).append(json.media);
}
});
});
});
</script>

猜你喜欢

转载自www.cnblogs.com/colizen/p/9804364.html