码迷,mamicode.com
首页 > Web开发 > 详细

二级联动非ajax实现

时间:2018-10-17 15:44:25      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:ready   help   func   sprint   lsp   span   empty   echo   spl   

二级联动非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>

二级联动非ajax实现

标签:ready   help   func   sprint   lsp   span   empty   echo   spl   

原文地址:https://www.cnblogs.com/colizen/p/9804364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!