JavaScriptコーディング

ブラウザにプルダウンとリンクが表示されている画面で、プルダウンが選択されるたびにリンク先の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になります。