html点击子元素,js篇：点击相应的父元素显示其对应的子元素

一、需求

创建资料，其中有的资料是父元素，有的资料是子元素；在页面中点击下拉菜单，选择对应的父元素，另一个下拉菜单可以显示该父元素对应的所有子元素

二、效果

三、思路

1.创建父元素和子元素资料可以用ancestry这个gem来实现

2.创建一个action比如index，用来查询父元素资料

3.创建一个index.html.erb文件，用来显示上图我们想要的效果

4.创建一个action叫做ajax，其用来查询选中的父元素对应的所有子元素

5.在index页面中调用ajax这个action，完成需求

四、实作步骤

1.我们要用到ajax，所有要在rails中使用jQuery

有两种引用jquery的方法：

(1)安装jQuery的gem

在Gemfile中加入:

gem 'jquery-rails'

终端执行:bundle install

在application.js中加入：

//= require jquery

//= require jquery_ujs

(2)去jQuery的官网复制jquery的代码，然后在本地的public下新建一个js文件，例如叫做jQuery.js，将代码粘贴到其中，然后在需要用到jQuery的地方进行引用

2.创建一个users table，并创建好users controller和user的model

users的table中有字段name

3.安装gem ancestry

在gemfile中加入:

gem 'ancestry'

终端执行：bundle install

4.添加ancestry栏位到users的table中

终端执行:rails g migration add_ancestry_to_users ancestry:string:index

这样就添加了ancestry栏位到users的table中，并且为ancestry打上了索引

终端执行:rake db:migrate

5.到user的model中，加入has_ancestry

class User < ActiveRecord::Base

+ has_ancestry

end

6.进入console中使用ancestry的children方法添加几笔资料

u=User.create(name: "1")

u.children.create(name: "1-1")

u.children.create(name: "1-2")

c= User.create(name: "2")

c.children.create(name: "2-1")

c.children.create(name: "2-2")

children.create可以将新生成的资料作为子元素，也就完成了父元素和子元素的对应

7.建立index action和ajax action的routes

resources :users do

collection do

get :ajax

end

end

8.在users的controller，建立index action

class UsersController < ApplicationController

def index

@users = User.where(:ancestry => nil)

end

这里由于只有两层关系，因此找到所有ancestry为nil的元素，就是所有的父元素

9.在users的controller中建立ajax action

def ajax

user = User.find(params[:category_id]).children

render :json => user

end

ajax action的作用是根据index 页面发来的请求和category_id传值进行查询，找到对应的子元素，然后将资料转换成json格式返回给前台的index 页面

值得注意的是ruby中最后一行代码的执行结果默认作为返回值，因此常常省略return，我们也可以这样写

return render :json => user

10.建立users的index页面，效果将在这个页面中展示

请选择

$("#father").change(function() {

if ($(this).val()){

get_category_id($(this).val());

}

});

function get_category_id(category_id) {

$.ajax({

type:'get',

url:'/users/ajax?category_id=' + category_id,

success:function(data){

users = data;

user_html = "请选择"

for(var i=0;i

user_html += "" + users[i].name+ "";

}

$("#children").html(user_html);

},

error:function(){

alert("fail！");

}

});

}

其中使用了select标签来建立下拉菜单，id为father的是父元素的下拉菜单，其中的值是从index action中传过来的@users，即查询到所有的父元素资料

id为children的是子元素的下拉菜单，其中的值是父元素对应的子元素，由于子元素的下拉菜单是空的，因此需要其中进行字符串的拼接从而形成父元素对应的子元素下拉选项。

显示子元素的下拉菜单选项的逻辑如下：

调用jQuery，如果选择了父元素的下拉菜单的中的选项，那么通过change方法获取该父元素的的id，$(this).val()是获得下拉选项中value的代码，通过if ($(this).val())来判断如果其中的内容为空则不执行get_category_id方法，否则执行get_category_id方法

由于value的值是父元素user的id，因此change方法中的$(this).val()就是user的id可以加上一行alert($(this).val());代码来验证这个判断。

$("#father").change(function() {

if ($(this).val()){

+ alert($(this).val());

get_category_id($(this).val());

}

然后执行到了get_category_id($(this).val());，这样就将父元素的id传入了get_category_id这个方法中，然后通过get请求去访问/users/ajax路径对应的action，也就是我们创建的ajax action，并向ajax action传了category_id，也就是父元素的id，ajax action通过这个id去找对应的子元素，并将子元素转成json格式返回给index 页面中的data变量，然后执行回调方法，通过遍历和html方法，将找到的每个子元素拼接到子元素下拉菜单中。

除了使用html方法

$("#children").html(user_html);

我们也可以使用append和empty方法，写成：

$("#children").empty();

$("#children").append(user_html);

注意，这里使用append进行拼接一定要组合使用empty清除子元素，否则每点击一次父元素就会往子元素下拉菜单中写入子元素，如图：

这是由于html是"替换"，append则是"附加"，所以我们要将原来的内容使用empty给清空掉，这样就不会重复附加内容到子元素下拉菜单中了。

五、参考资料: