JavaScriptコーディング

プルダウン選択でリンクURL更新

2008年11月30日
ブラウザにプルダウンとリンクが表示されている画面で、プルダウンが選択されるたびにリンク先のURLを更新したい場合のソースです。

ブラウザでの処理なので、JavaScriptでコーディングします。


PHP(html)側
<form method="post" action="" name="frmInfo">
 <select name="sel_val" onChange='set_Val("sel_val", "リンク先")'>
  <option value="Val1">値1</option>
  <option value="Val2">値2</option>
  <option value="Val3">値3</option>
 </select>

 <a href="link_saki.php?val=Val1">リンク先</a>

</form>


JavaScript側
function set_cahra_code(name, val){
 for (var i = 0; i < document.links.length; i++) {
  if((window.document.links[i].innerText === val) || (window.document.links[i].Text === val)){
   var strURL = window.document.links[i].href;
   strURL = strURL.replace("Val1", "");
   strURL = strURL.replace("Val2", "");
   strURL = strURL.replace("Val3", "");
   if(window.document.frmInfo.elements[name].value === ""){
    window.document.links[i].href = strURL + "Val1";
   }
   else{
    window.document.links[i].href = strURL + window.document.frmInfo.elements[name].value;
   }
  }
 }
}


アンカータグは同じ画面に他にもあるかもしれないので、全てのアンカータグをチェックします。識別にリンクテキストを使っているので、同じものがないようにしておきます。【innerText】(Internet Explorer 以外のブラウザは【Text】)のほかにも、リンク先URL【href】などで識別してもよいでしょう。

初期状態は、【link_saki.php?val=Val1】です。プルダウンの選択を変えるたびに、【link_saki.php?val=Val2】、【link_saki.php?val=Val3】などに更新されます。

ちょっとかっこ悪いのですが、URLのVal1~Val3を都度空文字に置き換え、新しい値をくっつけています。


これで、プルダウンを変更すると、リンク先のURLが更新されます。
つまり、プルダウンの選択に合わせたURLになります。