簡単そうで難しい問題

観測気球

収集物の記録書庫 a data archive of collection -- collectible toys

[要旨] 突発的に問題を出してみるテスト。誰も答えてくれなかったらどうしよう? (^^;
[キーワード] select,html,プルダウン,セレクトボックス

« 遥かなる時空の中で 〓八葉抄〓(こうさぎ) [via cocousagi](BlogPet) | トップページ | モンドールAOC、再び »

2005.11.21

簡単そうで難しい問題

問題

以下のような「プルダウン形式」のセレクトボックス 2つからなる html ファイルがあるとします。

<html>
<head>
<title>ComboBox Test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
  function openSelect() { 
    f.select1.selectedIndex = 0;
    f.select1.focus();
  } 

  function selectItem() { 
    f.select2.options[1] = new Option(f.select1.options[f.select1.selectedIndex].value + 0);
    f.select2.options[2] = new Option(f.select1.options[f.select1.selectedIndex].value + 1);
    f.select2.options[3] = new Option(f.select1.options[f.select1.selectedIndex].value + 2);
    f.select2.options[f.select.selectedIndex].setAttribute("selected","selected");
  } 

  function selectItem2() { 
    f.select2.focus(); 
  } 
</script>
</head>

<body onload="openSelect();">
<form name="f"> 
  <select name="select1" id="select1" onchange="selectItem()" style="width: 150px;">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <br>
  <select name="select2" id="select2" onchange="selectItem2()" style="width: 150px;">
  </select>
</form>
</body>
</html>

このファイルを Internet Explorer, Firefox, Opera 等のブラウザで開き、以下のような操作をします。

ブラウザで開いた直後
ブラウザで開いた直後

(1) 上のセレクトボックスを開き

上のセレクトボックスを開き

(2) 例えば 2 を選択します

2 を選択します

すると、以下のような表示になります。

2 が選択されました

ここで、問題です。2 を選択したときに、上記のような表示ではなく、下のような表示(下の方のセレクトボックスが開いた状態)になるようにするには、冒頭の html ファイルをどのように書き換えればいいでしょうか?

上のプルダウンメニューを選択したら、連動して自動的に下のプルダウンメニューを開いた状態にしたい
この絵のような状態にしたい


この問題、簡単そうに見えて、結構むずかしいです。おそらく、回答は1通りではないと思いますが、わかった人は答えを書いて、トラックバックもしくはメール等でお知らせください。

投稿者: tsupo 2005.11.21 午後 11:26 | 固定リンク | このエントリをはてなブックマークに登録 このエントリを含むはてなブックマークを表示 このエントリを「はてなブックマーク」に登録している人の数 | このエントリを del.icio.us に登録 このエントリの del.icio.us での登録状況 | このエントリを MM/Memo に登録 このエントリの 1470.net での登録状況 | このエントリを BlogPeople Instant Bookmark に登録 | このエントリを BlogPeople Tags に登録 | このエントリを Buzzurl に追加このエントリの Buzzurl での登録状況 | このエントリをドリコムRSSにクリップ | このエントリをニフティクリップに登録 | このエントリをlivedoorクリップに登録 このエントリのlivedoorクリップでの登録状況 このエントリをlivedoorクリップに登録している人の数 | FC2ブックマークに登録 FC2ブックマークでの登録状況 | Technorati で関連サイトを調査 | 酢鶏巡回中

楽天市場


プログラミング」カテゴリ内の最近の記事

日記・コラム・つぶやき」カテゴリ内の最近の記事

品揃え豊富で安い!NTT-X Store


アマゾンわくわく探検隊

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/6737/7254555

この記事へのトラックバック一覧です: 簡単そうで難しい問題:

コメント

コメントを書く




※イタズラ防止のため、メールアドレスを入力しないと投稿できません。

次からのコメント入力の手間を省くために、名前やメールアドレスをcookieに記憶しますか?


URL を入力すると、その URL にリンクがはられます。
なお、メールアドレスは公開されません。ご安心ください。


ワード

ニッセン

fujisan.co.jp

楽天市場