ダイナミックな国 - 都市の選択

初心者向けの通知、私は本当にperl Catalystを楽しんでいます。しかし、私はグーグルとカントはカントリーシティのダイナミックな選択のための解決策を見つける。私がドロップダウンから国を選択するとき、私は都市がそのcoutries都市だけに変更したいと思います。どうすればHTML :: FormHandlerを使ってPerl、Catalystでこれを実現できますか？ダイナミックな国 - 都市の選択

私は私が探していたまさに見つけPS データは、多くのrelatioshipに1

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;

出典

2017-10-02 Njugu

これは何のPerlの問題ではありません。ユーザーはブラウザ内で国を選択します。あなたは国が選択された後に都市を制限するためにクライアント側でjavascriptを使用する必要があります。 – dgw

@dgwと、HTMLを使用するときにどうやって行うのですか？：FormHandler – ysth

どれくらいのデータがあるかによって異なります。あなたには2つの選択肢があります。大規模なデータ構造内のすべてのデータを作成し、jsonまたは同様のものとしてページに組み込むか、AJAX呼び出しを処理するアプリケーション内にエンドポイントを作成します。 FormHandlerのいずれかに本当に必要はありません。 – simbabque

でMySQL DBから来ているが、私はそれを非常に感謝し、努力していただきありがとうございます。私が必要

ソリューションは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>

出典

2017-10-03 06:36:12 Njugu

この回答を編集して、関連するパーツの引用を含めたり、独自のソリューションを組み込んでください。スタックオーバーフローは、将来の読者に問題の解決策を提供することを目的としており、サードパーティのリソースがどれくらいの期間、どのくらいの期間保持されるかはわかりません。ありがとう。 – simbabque

ダイナミックな国 - 都市の選択

答えて

関連する問題