1

新手提醒，我真的很喜欢 perl Catalyst，但是，我用谷歌搜索并找不到国家 - 城市动态选择的解决方案。当我从下拉列表中选择一个国家/地区时，我希望这些城市仅更改为该国家/地区的城市。我如何在 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;
4

1 回答 1

0

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

我需要的解决方案在这里

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

<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>
于 2017-10-03T06:36:12.700 回答