準・究極の選択

セレクトメニューの選択項目に応じて隣接ボタンのリンクURLを変更する

解決済

  • 質問者：gakushiman
  • 質問日時：
  • 回答数：2件

セレクトメニューの選択項目に応じて、隣接したボタンのリンクURLを変更したいのですが、どのようにすればよいのでしょうか？

例えば、デフォルトで空リンクになっているボタンのURLが、セレクトメニュー内の選択項目の「ブルー」を選択すると、「http://www.aaa.co.jp/blue」になり、「レッド」を選択するとボタンのURLが「http://www.aaa.co.jp/red」に変更させたい場合。

---------サンプルソース----------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
</head>
<body>
<table width="300" border="0" cellspacing="5" cellpadding="0">
<tr>
<td><label>
<select name="select">
<option>カラーを選択してください</option>
<option>ブルー</option>
<option>レッド</option>
</select>
　</label>
</td>
</tr>
<tr>
<td><a href="#"><img src="../img/buttom.gif" width="180" height="30" border="0"></a></td>
</tr>
</table>
</body>
</html>
---------サンプルソース----------------------------------------------

宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： yambejp
  • 回答日時：

たとえばこんな感じ。



<script language="javascript">
function jump(f){
var sel1=f.sel1.value;
if(sel1=="") return false;
var url="http://www.aaa.co.jp/"+sel1;
location.href=url;
}
</script>
<form>
<table width="300" border="0" cellspacing="5" cellpadding="0">
<tr>
<td>
<select name="sel1">
<option value="">カラーを選択してください</option>
<option value="blue">ブルー</option>
<option value="red">レッド</option>
</select>
</td>
</tr>
<tr>
<td><input type="image" src="../img/buttom.gif" width="180" height="30" border="0" onClick="jump(this.form);return false"></td>
</tr>
</table>
</form>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました！
こちらを応用して、実際のソースに反映し試してみたいと思います！

通報する
お礼日時：2007/05/09 19:39

No.1

  • 回答者： k-roh
  • 回答日時：

一つの方法ですが、JavaScriptを使います。


「隣接したボタン」をクリック(OnClick)したときにJavaScriptを使って Selectの値を参照します。
その値を元にswitch case でそれぞれのリンク先のURLを変数に代入します。
最後にそのURLにジャンプさせます。

多分スクリプトなしでは無理だと思います。

この回答への補足

ご回答いただき誠にありがとうございます！
当方javascriptの知識が非常に乏しいので、どの部分にどのように記述すればよいのかご教授いただけると大変助かるのですが、お手数でなければサンプルソースを書いていただけると幸いです。
宜しくお願いいたします。

補足日時：2007/05/09 19:43
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報