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

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

时间: 2024-09-30 16:51:52

二级联动非ajax实现的相关文章

份-城市,基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】

package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import java.util.Set; import com.opensymphony.xwork2.ActionSupport; /** * 控制器 * @author AdminTC */ public class ProvinceCityAction extends ActionSupport{ priv

Ajax实现的城市二级联动二

上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option>请选择</option> </select> <select id="city"> <option>请选择</option> </select> 2.JS /* * 省份信息和城市信息全部来源于服务器端 * * 第一

ajax实现二级联动

用js实现简单的ajax二级联动(如上图) HTML代码: 1 省份:<select id="province" onchange="getCity();" > 2 <option>请选择--</option> 3 </select> 4 城市:<select id="city"> 5 <option>请选择--</option> 6 </select>

Query实例的ajax应用之二级联动的后台是采用php来做的

jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动数据库表设计 csj_trade id int(11) auto_increment          tname varchar(100)tradeType int(11) 其中,id为主键自动索引,tname为行业名称,tradeType为一个标识,为0时,表示这条数据是大类:不为0,而是某个数字的时候,则这个数字表示其父级的id.(1)主页面 <script type="t

jsp+ajax+serverlet实现省市二级联动

jsp界面 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g

Spring MVC中Ajax实现二级联动

今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody public Map<String,Object> faultType(int id,HttpServletRequest request)throws IOException { String ReturnMessage = ""; //获取所有子类故障类型 List<F

jQuery实例的ajax应用之二级联动

jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动 数据库表设计 csj_trade id int(11) auto_increment tname varchar(100) tradeType int(11) 其中,id为主键自动索引,tname为行业名称,tradeType为一个标识,为0时,表示这条数据是大类;不为0,而是某个数字的时候,则这个数字表示其父级的id. (1)主页面http://rl.82676666.com ——

Asp.Net下,基于Jquery的Ajax二级联动

最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制,所以抛弃这种方案,用Jquery实现Ajax效果.直接上代码,简单直观. 1.前端页面(这里给出页面二级联动示意,分别为两个select) <select name="xsxy" id="xsxy"> <option>-- 请选择学院名称 --&

PHP+ajax实现二级联动

? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" c