ドロップダウンを選択し、JSの値を変更し、ページ

をリロード私はドロップダウンボックスからオプションを選択すると、それは次のことを行い、そのスクリプトを記述しようとしています：ドロップダウンを選択し、JSの値を変更し、ページ

変更」の値var pick_ "このオプションに基づいています。
ページをリロードします。
ドロップダウンで選択したオプションを維持し、 "var pick_"を選択します。

どうすればJavascriptを使ってこの問題を解決できますか？ hereとhereを調べましたが、ページを再読み込みしても選択オプションが維持されません。ここで

は私のスクリプトです：

var pick_ = 1 

<select id = "selectX" onchange = "getSelectValue('selectX');"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select> 

function getSelectValue(selectID){ 
    pick_ = document.getElementById(selectID).value; 
    location.reload(); 
}

は、変数のデータを保持したい場合は、ローカル・ストレージまたはCookieまたは任意のサーバー側を使用してどこかに保存することができますあなたの

出典

2017-11-25 Fxs7576

これは、実際にあるスルタン・カーンの答えと同じ技術を使用していますが、リロード後に値を取得する必要があります。

window.addEventListener('load', function(){ 
    if (localStorage.pick) { 
     var sel = document.querySelector('#selectX'); 
     sel.value = localStorage.pick; 
    } 
}); 

function getSelectValue(){ 
    var sel = document.querySelector('#selectX'); 
    localStorage.pick = sel.value; 
    location.reload(); 
}

、あなたのHTML

<select id = "selectX" onchange = "getSelectValue();"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select>

出典

2017-11-25 05:31:56 am05mhz

この回答は機能しますが、任意のデータをクッキーに保存することは悪い習慣です。これがDOMがスラッグに変わる方法です。クッキーは絶対に必要な場合にのみ使用してください。 – SynchroDynamic

@SynchroDynamicどのコードがクッキーを使用していますか？ 'localStorage'を使っているのを見ていませんか？ – am05mhz

ありがとうございます。

var pick_ = 1 

<select id = "selectX" onchange = "getSelectValue('selectX');"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select> 

function getSelectValue(selectID){ 
    pick_ = document.getElementById(selectID).value; 
    localStorage.pick_ =pick_ 
    pick_ = localStorage.getItem("pick_"); 
    location.reload(); 
}

この作品はあなたにおすすめです。

出典

2017-11-25 05:18:23

最短ではクッキーを使用します。

function getSelectValue(selectID){ 
    pick_ = document.getElementById(selectID).value; 
    document.cookie = "pick="+pick_; 
    location.reload(); 
}

とCookie名のページのチェックをリロード次回は「ピック」が存在する場合、それは価値がそうでなければ、デフォルトに選択ピック

出典

2017-11-25 05:22:42 Zakawat

にあなたはクッキーやローカルストレージのようないくつかの世界的に利用可能な位置にドロップダウンリストの値を保存する必要があります。

注：スニペットはここでは実行されませんが、正常に動作します。

function getSelectValue(selectID){ 
 
     pick_ = document.getElementById('selectX').value; 
 
     localStorage.setItem("lastSelectedValue", pick_); 
 
     location.reload(); 
 
} 
 
function getLastSelectedValue(){ 
 
     var value = localStorage.getItem("lastSelectedValue") 
 
     if(value) 
 
     { 
 
      document.getElementById('selectX').value = value ; 
 
     } 
 
}

<html> 
 
<body onload = 'getLastSelectedValue()'> 
 
<select id = "selectX" onchange = "getSelectValue('selectX');"> 
 
    <option>option 1</option> 
 
    <option>option 2</option> 
 
    <option>option 3</option> 
 
    <option>option 4</option> 
 
    <option>option 5</option> 
 
</select> 
 
</body> 
 
</html>

出典

2017-11-25 05:35:13

'localStorage'はクッキーと違うので、混乱を避けるために関数の名前を変更する方が良いです。 – am05mhz

@ am05mhzそれを指摘してくれてありがとう。私はコードスニペットを更新しました。 –

あなたがリロードするページが必要な場合、あなたはあなたのURLにパラメータを設定することができます。パラメータを取得できます。これを行うには他にも多くの方法がありますが、これを何らかの形で保存する理由はないと私は考えています。これを実現するために

、私は次のようでした：

オプションに値を与えます。ページが次に、あなただけの楽しみ
getParameter(name, url)を再ロードされたときに
は、この値を取得する関数を作成してURL setSelectValue(key, value)

にパラメータを設定する関数を作成します！私はこれがあなたの要件ごとに作品を願ってい

<select id = "selectX" onchange="setSelectValue('id', this.value);"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 
<script> 
    var pick_ = getParameter("id"); 
    var selectedOption = document.getElementById("selectX"); 
    selectedOption.options[(pick_ - 1)].setAttribute("selected", "selected"); 
    function setSelectValue(key, value) {//We can set a Parameter in our URL like this 
     key = encodeURI(key); 
     value = encodeURI(value); 
     var kvp = document.location.search.substr(1).split('&'); 
     var i = kvp.length; 
     var x; 
     while (i--)// 
     { 
      x = kvp[i].split('='); 
      if (x[0] === key) 
      { 
       x[1] = value; 
       kvp[i] = x.join('='); 
       break; 
      } 
     } 
     if (i < 0) { 
      kvp[kvp.length] = [key, value].join('='); 
     } 
     document.location.search = kvp.join('&'); 
    } 
    function getParameter(name, url) {//We can then return the URL like this 
     if (!url) 
      url = window.location.href; 
     name = name.replace(/[\[\]]/g, "\\$&"); 
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
       results = regex.exec(url); 
     if (!results) 
      return 1;//if no parameters return the first option 
     if (!results[2]) 
      return ''; 
     return decodeURIComponent(results[2].replace(/\+/g, " ")); 
    } 
</script>

。

出典

2017-11-25 06:08:30 SynchroDynamic

ドロップダウンを選択し、JSの値を変更し、ページ

答えて

関連する問題