Question

新手警报，我真的很享受perl Catalyst，但是，我用google搜索并且无法找到Country-City动态选择的解决方案。当我从下拉列表中选择一个国家时，我希望这些城市只能改为那些城市。我如何使用HTML :: FormHandler在Perl，Catalyst中实现这一点。

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

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;

Answer 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>

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

1 个答案: