2017-03-14 8 views
0

複数の依存ドロップダウンフィールドを4段階設定しました。私は地域、国、所有、フランチャイズ、そして最終的に店名を選択したい。jQuery依存フィールド(リセット値)、MySQLに同じ名前の属性フィールドを追加

私の問題:「 - 」 1)の表示/非表示は、[OK]を動作しますが、私が選択したときに値をリセットしません。これは、私が1つの店を選び、自分の意見を変え、上の欄から別の選択肢を選び、2番目の店を選ぶことができるということです。 POSTは両方の値を持ちます。別のオプションを選択したときに最初の値をリセットしたい

2)ストア名はすべてstore_nameの名前属性を持っています。私はimplode()を使っている間にmysql dbに正しく記録されるように管理できません。

のjQuery:

$(document).ready(function() { 
    $("#region").bind("change",function(){ 
     var selectedValue=$(this).val().toLowerCase(); 
     switch(selectedValue){ 
      case "asia": 
       $("#country_asia").show(); 
       $("#country_america").hide() 
       $("#country_europe").hide() 
       break; 
      case "america": 
       $("#country_asia").hide(); 
       $("#country_america").show(); 
       $("#country_europe").hide();  
       break; 
      case "europe": 
       $("#country_asia").hide(); 
       $("#country_america").hide(); 
       $("#country_europe").show();  
       break; 
      case "-": 
       $("#country_asia").hide() 
       $("#country_america").hide() 
       $("#country_europe").hide() 
       break; 
         } 
    }); 
    $("#country_europe_dd").change(function() 
{ 
    var selectedValue=$(this).val().toLowerCase(); 
    if(selectedValue == "greece") 
    { 
    $("#owned_gr").show(); 
    } 
    else if(selectedValue == "-") 
    { 
    $("#owned_gr").hide(); 
    } 
}) 
    $("#owned_gr_dd").change(function() 
{ 
    var selectedValue=$(this).val().toLowerCase(); 
    if(selectedValue == "own") 
    { 
    $("#store_name").show(); 
    $("#store_name_greece_fran").hide(); 
    } 
    else if(selectedValue == "fran") 
    { 
    $("#store_name_greece_fran").show(); 
    $("#store_name").hide(); 
    } 
    else if(selectedValue == "-") 
    { 
    $("#store_name").hide(); 
    $("#store_name_greece_fran").hide(); 
    } 
}) 
}); 
    </script> 

フォーム:

<div class="form-group region required" data-cid="region"> 
    <label class="control-label" for="region">Region</label> 

<div class="input-group"><span class="input-group-addon left"><i class="glyphicon glyphicon-pushpin"></i></span> 
    <select class="select form-control" onChange="displayForm(this)" id="region" name="region"> 
    <option value="-">- Select -</option> 
    <option value="america">America</option> 
    <option value="asia">Asia</option> 
    <option value="europe">Europe</option> 
    </select> 
</div> 
</div> 

<div id="country_europe" class="form-group country_europe required" style="display: none" data-cid="country_europe"> 
    <label class="control-label" for="country">Country</label> 

<div class="input-group"><span class="input-group-addon left"><i class="glyphicon glyphicon-pushpin"></i></span> 
    <select class="select form-control" id="country_europe_dd" name="country"> 
    <option value="-">- Select -</option> 
    <option value="cyprus">Cyprus</option> 
    <option value="france">France</option> 
    <option value="germany">Germany</option> 
    <option value="greece">Greece</option> 
    <option value="iceland">Iceland</option> 
    <option value="italy">Italy</option> 
    <option value="netherlands">Netherlands</option> 
    <option value="norway">Norway</option> 
    <option value="serbia">Serbia</option> 
    <option value="switzerland">Switzerland</option> 
    </select> 
</div> 
</div> 

<div id="owned_gr" class="form-group owned_gr required" style="display: none" data-cid="owned_gr"> 
    <label class="control-label" for="owned_gr">Owned or Franchise ?</label> 

<div class="input-group"><span class="input-group-addon left"><i class="glyphicon glyphicon-pushpin"></i></span> 
    <select class="select form-control" id="owned_gr_dd" name="owned"> 
    <option value="-">- Select -</option> 
    <option value="own">Owned</option> 
    <option value="fran">Franchise</option> 
    </select> 
</div> 
</div> 

<div id="store_name" class="form-group store_name required" style="display: none" data-cid="store_name"> 
    <label class="control-label" for="store_name">Store Name - Greece (Owned)</label> 

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-buysellads"></i> </span> 
<select class="form-control" name="store_name[]" id="store_name_gr_owned" 
    data-rule-required="true" > 
    <option value="-">- Select -</option> 
    <option value="option1">Option1</option> 
    <option value="option2">Option2</option> 
    </select> 
</div> 

</div> 

<div id="store_name_greece_fran" class="form-group store_name_greece_fran required" style="display: none" data-cid="store_name_greece_fran"> 
    <label class="control-label" for="store_name_greece_fran">Store Name - Greece (Franchise)</label> 

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-buysellads"></i> </span> 
<select class="form-control" name="store_name[]" id="store_name_greece_fran" 
    data-rule-required="true" > 
    <option value="">- Select -</option> 
    <option value="athens">Athens</option> 
    <option value="crete">Crete</option> 
    </select> 
</div> 

</div> 

PHP:

$store_name = implode($_POST['store_name']); 

答えて

1

編集:以下のコメントからは、また、#2を解決する#1を解決するように聞こえます。

#1の場合、要素がhideになるたびに、その値を-に設定します。例えば。バニラJSを使用して

case "asia": 
    $("#country_asia").show(); 
    $("#country_america").hide(); 
    $("#country_america").val("-"); 
    $("#country_europe").hide(); 
    $("#country_europe").val("-");  
    break; 

または、:

document.getElementById("country_europe_dd").value = '-'; 

#2のために、私はあなたのコードに何かを見ることはできません。あなたは精緻化できますか?たぶん、あなたは $store_nameのために見ているもののサンプル出力が含まれていますか?

+0

ありがとうございます。私は.valを試みたが、うまくいかなかった。あなたに(#1に接続されている)について#2を例を与えるために:私は、地域、ヨーロッパを選択し、ギリシャは、その後、私はSTORE_NAMEを選ぶ所有、私は別のSTORE_NAMEを選択して、私は、フォームを送信すると記録された値は、両方の店でフランチャイズを選択一緒に名前。 –

+0

ええ、私はあなたのコードをローカルにコピーしました。そして 'val'は正常に動作しました。どのバージョンのJQueryを使用していますか? 'val'がうまくいかなかった理由を知っていますか? 。 –

+0

あなたはバニラJSを使用することができます: 'のdocument.getElementById(「country_europe_dd」)値=「 - 」;' それはあなただけで、問題の#2が解決される他の 'store_name'のドロップダウンをリセットする場合のように聞こえます。 –

0

解決策が見つかりました。

I)は(jQueryの上で、さらに一歩進んとvalを使用する必要があります。選択したフィールドで特定の値を選択すると、他のカテゴリの値がリセットされます。

$("#store_name_greece_fran_dd").change(function() 
{ 
    var selectedValue=$(this).val().toLowerCase(); 
    if(selectedValue == "athens" || selectedValue == "athens" || selectedValue == "crete" || selectedValue == "crete") 
    { 
    $("#store_name_owned_dd").val(''); 
    } 
}) 
関連する問題