二級聯動非ajax實現
阿新 • • 發佈：2018-10-17
app attr int inpu .ajax dto top pla end 二級聯動非ajax實現，改改就能用。
html部分代碼 ：
<tr>
<td colspan="2">
<select name="fatherTopicId" class="select" id="fatherTopicId" style=‘‘>
<option value="" selected="selected">— <?php echo __(‘Select a Parent Help Topic‘);?> —</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">— <?php echo __(‘Select a Child Help Topic‘);?> —</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">* <?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實現