每天一剂Rails良药之八十八：级联选择

javascripts_controller.rb

def dynamic_states
  @states = State.find(:all)
end

application_helper.rb

def javascript(*files)
  content_for(:head) { javascript_include_tag(*files) }
end

def stylesheet(*files)
  content_for(:head) { stylesheet_link_tag(*files) }
end

people/new.html.erb

<% javascript 'dynamic_states' %>

javascripts/dynamic_states.js.erb

var states = new Array();
<% for state in @states -%>
  states.push(new Array(<%= state.country_id %>, '<%=h state.name %>', <%= state.id %>));
<% end -%>

function countrySelected() {
  country_id = $('person_country_id').getValue();
  options = $('person_state_id').options;
  options.length = 1;
  states.each(function(state) {
    if (state[0] == country_id) {
      options[options.length] = new Option(state[1], state[2]);
    }
  });
  if (options.length == 1) {
    $('state_field').hide();
  } else {
    $('state_field').show();
  }
}

document.observe('dom:loaded', function() {
  countrySelected();
  $('person_country_id').observe('change', countrySelected);
});

Prototype的代码，嘿嘿，都很简单
但是，countrySelected方法这样写性能会very very bad，正在做的产品中有切身体会啊
循环上千条数据就能让IE7挂掉哦～Trimpath（JS Template）性能也不咋地哦～

评论

2 楼 rubyonrailscn.org 2008-04-10  

淘宝就是用类似的逻辑，所以选择发货的时候有一个 140+k 的js三级城市地址文件。
不过现在的浏览器的js虚拟机都久经考验，所以页面表现性能不会太糟糕。

如果要在进一步优化的话，可以采用 80/20原则

var states = new Array();  
<% for state in @states -%>  
  states.push(new Array(<%= state.country_id %>, '<%=h state.name %>', <%= state.id %>));  
<% end -%>  

这一段只打印最常被选择的城市，比如京、沪、广、港、澳、台。然后 countrySelected() 方法修改一下，如果常量数据中有被选择的城市，则直接生成下级列表。如果没有，则用一个ajax load去获取下级列表。

在考虑浏览器兼容性，考虑到城市级链是很少变更的，所以可以看作是常量。随意可以预先生成到county_id.js文件。然后当选择了偏僻的城市之后，用一个document.write('<script>county_id.js</script>')引入包含所要的常量的文件，这样连ajax的操作都省了。

1 楼 blackanger 2008-04-02  

那你给个解决方法让大家学习一下么，这么说很吊人胃口