使用jquery动态下拉列表

时间:2017-10-13 16:55:51

标签: javascript jquery html ruby-on-rails jquery-ui

我根本不懂jquery。但我必须根据城市设计一个城镇的动态下拉列表。顺便说一句,我正在使用Ruby on Rails。 这是我的观看代码:

  <fieldset>
      <div class="form-group">
        <label class="col-sm-2 control-label">Şehir:</label>
          <div class="col-sm-10">
            <%= f.collection_select :city_id, City.limit(2), :id, :name, include_blank: true %>
          </div>
      </div>
  </fieldset>


  <fieldset>
      <div class="form-group">
        <label class="col-sm-2 control-label" id="ilce_id">İlçe:</label>
          <div class="col-sm-10">
            <%= f.grouped_collection_select :town_id, City.order(:name), :towns, :name, :id, :name, include_blank: true %>
          </br>
          </br>
          </div>
      </div>
  </fieldset>

和jquery:

<script type="text/javascript">

jQuery(function() {
  var towns;
  $('#ilce_id').hide();
  $('#location_town_id').parent().hide();
  towns = $('#location_town_id').html();
  return $('#location_city_id').change(function() {
    var city, escaped_city, options;
    city = $('#location_city_id :selected').text();
    escaped_city = city.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    options = $(towns).filter("optgroup[label='" + escaped_city + "']").html();
    if (options) {
      $('#ilce_id').show();
      $('#location_town_id').html(options);
      return $('#location_town_id').parent().show();
    } else {
      $('#location_town_id').empty();
      $('#location_town_id').parent().hide();
      return $('#ilce_id').hide();
    }
  });
});
</script>

如果我在“新”页面中使用此代码,则此代码正常工作。但是在“编辑”视图中,即使已经选择了城市和城镇,也不会出现城镇选择。我希望它像:

  • 如果已选择城市和城镇并且控制器呈现“编辑”页面,则应显示城镇选择并且已选择城镇应为活动选项。 (我的意思是在下拉列表中应该选择已选择的城镇选项。)
  • 如果仅选择了城市并且控制器呈现“编辑”页面,则应显示城镇选择,并且下拉列表中应显示“提示”(如“选择城镇...”)。

也许这不是什么大不了的事,但由于我不知道js和jquery,我无法管理它。

感谢您的帮助。

0 个答案:

没有答案