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になります。
2008年11月
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
先月
来月
カテゴリ
検索
関連サイト
プロフィール
【ネットネーム】
みゅー

キャラクター by ツカエルサイト


【趣味】
・プログラミング
・写真
・楽器演奏
・手芸
・日曜大工
・家の中の不便を便利に
・考える
・自然科学
・猫と戯れる
・ジグソーパズル

【仕事】
・派遣社員でSE・PGやっていました。次の良い仕事がみつからないので、ビジネスへ注力しようと思っています。
・経験言語:VB6、VB.NET、PHP、Perl、JAVA、Oracle、SQLServer、PostgreSQL



【名前】
アン(足)

2014年4月22日生まれ 女の子
あだ名は くノ一
普段は普通にしゃべりますが、興奮すると『ニャ』を連発します

【趣味】
・狩
・ご飯を食べる
・ママのお手伝い

【仕事】
ママのビジネスの看板招き猫
ママの代わりにPC入力
仕事中のママの右腕を温める
ママに心配をかける
いろんな事をしでかしてママを退屈させない

RSSフィード