如何创建具有空白选项和未筛选状态的动态选择字段

How to create dynamic select field with blank option and unfiltered state

本文关键字：筛选 状态 字段 选择 动态 选项 空白 何创建 创建      更新时间：2023-09-26

我需要在 Rails 3.2 中创建一个动态选择字段，其中第二个字段（州）中的可用选项取决于第一个字段（国家/地区）的值。我已经参考了这个Railscast的修订版本，并使用以下代码：

jQuery ->
  $('#person_state_id').parent().hide()
  states = $('#person_state_id').html()
  $('#person_country_id').change ->
    country = $('#person_country_id :selected').text()
    escaped_country = country.replace(/([ #;&,.+*~'':"!^$[']()=>|'/@])/g, '''$1')
    options = $(states).filter("optgroup[label='#{escaped_country}']").html()
    if options
      $('#person_state_id').html(options)
      $('#person_state_id').parent().show()
    else
      $('#person_state_id').empty()
      $('#person_state_id').parent().hide()

我需要对此代码进行两项更改，我认为对于比我拥有更强的JavaScript技能的人来说，这应该非常简单。

  1. 在过滤列表中，我需要包含一个空白选项。当前选择国家/地区会导致选择文件列表中的第一个州状态。我需要留下"请选择"提示。我该怎么做？

编辑

SMathew的建议在这里有所帮助。我正在使用$('#person_state_id').html(options).prepend('<option></option>')它与 html 标签上的提示属性一起获得了所需的结果。

  1. 如果未选择国家/地区（即else语句），person_state_id应包含所有州的完整、未经过滤的列表。我试过：

    else $('#person_state_id').html(states)

但这并没有像预期的那样行事。我遇到了这些问题。

  1. 如果我选择具有相关州记录的国家/地区，则会正确过滤 #person_state_id 选项（并且带有 smathews 建议，包括提示）。

  2. 如果我选择一个没有关联州记录的国家/地区，#person_state_id 包含所有州，标记中为空白选项，但默认情况下选择第一个州选项。（它应为空，默认情况下选择空白选项并显示提示）。

  3. 如果我清除 #person_country_id 中的选择，#person_state_id 包含所有状态的未过滤列表（正确），标记中有一个空选项（正确），但默认情况下选择第一个状态记录（应该是提示）。

如何解决这些问题？

谢谢

尝试

...
if (options) {
  $('#person_state_id').html(options).prepend('<option>Please select</option>').parent().show()
} else {
   $('#person_state_id').html(states).prepend('<option>Please select a state</option>').parent().show()
}

为了解决我的第二个问题，我添加了以下咖啡脚本

jQuery ->
  resetCountry = ->
    $('#person_state_id').select2 "val", "0" 
  $('#person_country_id').bind("change", resetCountry);

这一点，再加上斯马修的回答，似乎正在起作用。

（我正在使用 select2 来格式化我的选择字段。如果不使用 select2），则需要不同的方法来设置值）

相关文章：