2016-10-09 17 views
0

選択リストから動的に選択リストを作成するJavaScriptコードがあります。選択したJavascriptのフィールドを動的に継承します

正常に動作しています。ページのリロード後に作成された選択リストをすべて表示しておく必要があります。今、ページをリロードすると、新しい選択リストが消えます。

<div class="container"> 
    <div id="selected_form_code"> 
      <select id="select_btn"> 
        <option value="0">--How many rooms ?--</option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
      </select> 
    </div> 
    <div id="form_submit"> 
    <!-- Dynamic Registration Form Fields Creates Here --> 
    </div> 
</div> 
<script> 
function get_chambre_html(cn) 
{ 
    return "<div>" 
     + "<b>Chambre " + cn + ":</b> " 
     + "Adultes: <select id='adultes" + cn + "'>" 
     + "<option value='0'>--How many adults ?--</option>" 
     + "<option value='1'>1</option>" 
     + "<option value='2'>2</option></select>" 
     + "<br/>Enfants: <select id='enfants" + cn + "'>" 
     + "<option value='0'>--How many enfants ?--</option>" 
     + "<option value='1'>1</option>" 
     + "<option value='2'>2</option></select>" 
     + "<div id='ages" + cn + "'></div>" // empty block for further usage 
    +"</div>"; 
} 

$(document).ready(function() 
{ 
    $('select#select_btn').change(function() 
    { 
    var sel_value = $('option:selected').val(); 
    $("#form_submit").empty(); //Resetting Form 
    // Below Function Creates Input Fields Dynamically 
    create(sel_value); 
    // Appending Submit Button To Form 
    }); 


    function create(sel_value) 
    { 
    for (var i = 1; i <= sel_value; i++) 
    { 
     $("div#form1").append($("#form_submit").append(get_chambre_html(i))); 
     $("div#form1").append($("#form_submit").append("<div id='ages"+i+"'/>")); 
     $('select#enfants'+i).change(function(){ 
     var infants = this.value; 
     var i=this.id.substr(7); // 7 = strlen of 'enfants' 
     for(var j=0; j<infants; j++) 
      $('#ages'+i).append(':[input age block '+i+']: '); 
     }); 
    } 
    }; 
}); 
</script> 
+0

もちろんこれは起こります。ドロップダウンリストで値を選択してリストに値を入力します。ページを手動でリロードする場合は、再度選択する必要があります。とにかくあなたの質問dosen'tは、どのように、なぜあなたがページをリロードするためにwnatのいずれかの 'html'関連のページを表示します。 – Franco

+0

このコードは結果ページの検索フォームにあるため、ページはすべての検索で再読み込みされます。ページのリロード後にテーマを表示するための新しい選択リストを保存するソリューションはありますか?問題を解決するためにこのコードの代わりに使用することはできますか? – Clementine

+0

ホテル予約システムなどを実装する場合は、 'ajax'を使用する方が良いでしょう。データベースからデータをフェッチし、データを保存し、結果をユーザーに表示する必要があります。したがって、これらの値をリロードすることはまったく役に立ちません。実装を続けるうちに、さらに多くの問題が発生します。だから私はあなたが最初からそれを良いものにすることをお勧めします。 – Franco

答えて

0

ユーザーが離れる前に/ページをリフレッシュし、あなたはこのようにlocalStorageまたはsessionStorageで選択を保存することができます。

window.onbeforeunload = function() { 
    localStorage.setItem(name, $('#select_btn :selected').val()); 
} 

、ページのロードに、あなたはにチェックすることができますすべてのデータがローカルストレージに保存されているかどうかを確認し、最後に選択したページがページに表示されるようにすることができます。

関連する問題