2010年05月24日

HTML セレクトメニュー

スポンサード リンク

 セレクトメニュー(オプションメニュー)ボタン付き
Javascriptで値を取得、指定URL にジャンプ。

サンプルソース

<html>
 <head>
  <title>セレクトメニュー(オプションメニュー)の値</title>
<script language="JavaScript">
<!--javascript123
 function selec() {
   var List = document.getElementById("list");
    index_nub = List.selectedIndex;
     Opt_val=List.options[index_nub].value;
      Txt_val =List.options[index_nub].text;

// 取得した値をalert表示
alert("項目の参照番号: "+index_nub+"\noption value: "
+Opt_val+"\nタイトル: "+Txt_val);

// 確認ダイアログの表示
Resp = confirm(Txt_val+" にジャンプします。\n\tよろしいですか?");
if ( Resp == true ){
   window.location.href = Opt_val;// 取得した移動先にジャンプ
    }
    }
// -->
</script>
</head>
<body>
<form>
<select id="list">
 <option value="http://www.google.com/">Google</option>
 <option value="http://www.moshimo.com/top/227349/" selected>moshi market</option>
 <option value="http://www.baidu.jp/">百度(バイドゥ)</option>
 <option value="http://ja.wikipedia.org/wiki/">Wikipedia(百科事典)</option>
 <option value="http://www.yahoo.co.jp/">Yahoo!JAPAN</option>
</select>
  <input onclick="selec()" type="button" value="GO" />
</form>
</body>
</html>

選択されている項目の参照番号
 var List = document.getElementById("list");
index_nub = List.selectedIndex;
項目の数は"0"から数え始めます。百度(バイドゥ)の
場合は"2"を返します。
option valueの値
 Opt_val =List.options[index_nub].value;
optionタグのvalue属性は送信する値です。
サンプル
では各項目の"URL"です。
項目の値
Txt_val =List.options[index_nub].text;
セレクトボックスに表示されるタイトルの値です
window.location.href ="URL";
指定したURLにジャンプします。
window.location.href = Opt_val;
Opt_val には選択した項目のURLが入っているので
そのサイトに移動します。

セレクトメニューの設置 値の取得 onchangeイベント
window.confirm() 確認ダイアログ
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

2008年06月26日

プルダウンメニュー (ドロップダウンメニュー)タグを使って グループ化

スポンサード リンク

サンプルソース

<optgroup label="***">は、 プルダウンメニュー (ドロップダウンメニュー)のリスト <OPTION>〜</OPTION> をグループ化するタグです。
都道府県の選択など、項目が多い場合はoptgroup labelを使ってグループ化することで選択しやすくなり、 ユーザビリティーが向上します。

×

この広告は90日以上新しい記事の投稿がないブログに表示されております。