动态国家 - 表格上的城市选择答案

【问题标题】：Dynamic Country - city select on form动态国家 - 表格上的城市选择
【发布时间】：2018-03-13 17:50:55
【问题描述】：

新手提醒，我真的很喜欢 perl Catalyst，但是，我用谷歌搜索并找不到 Country - City 动态选择的解决方案。当我从下拉列表中选择一个国家/地区时，我希望这些城市仅更改为该国家/地区的城市。我如何在 Perl、Catalyst 中使用 HTML::FormHandler 实现这一点。

PS 数据来自具有一对多关系的mysql db

has_field 'city_id' => (
    label            => 'City',
    type             => 'Select',
    empty_select     => 'Choose city',
    required         => 1,
    required_message => 'Please enter city.',
);

has_field 'country_code' => (
    label            => 'Country',
    type             => 'Select',
    empty_select     => 'Choose country',
    required         => 1,
    required_message => 'Please enter your country.',
);

has_field 'submit'  => ( 
    type => 'Submit', 
    value => 'Save', 
    element_class => ['btn'] 
);

sub options_country_code {
    my $self = shift;
    return unless $self->schema;
    my @countries = $self->schema->resultset('Country')->all;
    my @options = map { { value => $_->country_code, label => $_->country_name } } @countries;
    unshift @options, { value => 0, label => 'Choose Country' };
    return @options;
}

__PACKAGE__->meta->make_immutable;
1;

【问题讨论】：

这不是 perl 问题。用户在他的浏览器中选择国家。选择国家后，您必须在客户端使用 javascript 来限制城市。
@dgw 问题是使用 HTML::FormHandler 时如何做到这一点
这取决于有多少数据。你有两个选择。您可以在大型数据结构中创建所有数据并将其作为 json 或类似格式包含在页面中，或者在您的应用程序中创建一个端点来处理 AJAX 调用。对于它们中的任何一个，您都不需要 FormHandler。
我完全同意 cmets，有人可以分享一些关于如何实现这一点的代码吗？我还没有找到关于此事的示例代码，因此发布了这篇文章。

标签： perl catalyst html-formhandler

【解决方案1】：

我找到了我正在寻找的东西，感谢您的努力，非常感谢。

我需要的解决方案是here

我使用此代码作为我的基础：

<html>
<head>
<script type="text/javascript">
function setmenu2() {
  var menu1 = document.getElementById('menu1');
  var sel   = menu1.options[menu1.selectedIndex].text;
  var menu2 = document.getElementById('menu2');

  if (sel == "Foo") {
    menu2.innerHTML = "<option>Foo-1</option>"
                     +"<option>Foo-2</option>";
  } else {
    menu2.innerHTML = "<option>Bar-1</option>"
                     +"<option>Bar-2</option>"
                     +"<option>Bar-3</option>";
  }
}
</script>
</head>

<body>

<select id="menu1" onchange="setmenu2()">
<option>please select...</option>
<option>Foo</option>
<option>Bar</option>
</select>

<select id="menu2">
<option>- ?? -</option>
</select>

</body>
</html>

到目前为止，这是我所拥有的：

<script type="text/javascript">
function setcities() {
  var country_select = document.getElementById('country_code');
  var sel   = country_select.options[country_select.selectedIndex].value;
  var city_select = document.getElementById('city_id');

  if (sel == "AFG") {
    city_select.innerHTML = "<option value='1' id='city_id.1'>Kabul</option>"
                     +"<option value='2' id='city_id.2'> Qandahar</option>";
  } else if (sel == "AGO"){
    city_select.innerHTML = "<option value='56' id='city_id.1'>Luanda</option>"
                     +"<option value='57' id='city_id.2'>Huambo</option>"
                     +"<option value='58' id='city_id.3'>Lobito</option>";
  } else {
    city_select.innerHTML = "<option>nothing</option>";
  }
}
</script>


<select id="country_code" onchange="setcities()">
  <option value="" id="country_code.0">please select...</option>
  <option value="AFG" id="country_code.1">Afghanistan</option>
  <option value="AGO" id="country_code.2">Angola</option>
  <option value="AIA" id="country_code.3">Anguilla</option>
</select>


<select id="city_id">
  <option>- ?? -</option>
</select>

【讨论】：

请编辑此答案以包含相关部分的引用，或包含您自己的解决方案。 Stack Overflow 旨在为未来的读者提供他们问题的解决方案，我们不知道第三方资源会存在多久。谢谢。