• 締切済み

selectのoptionを条件によって変更する方

セレクトボックスの表示位置が画面の真ん中より上ならば、uekaraの中身をselectのoptionに追加。 真ん中より下ならば、sitakaraの中身をselectのoptionに追加というコードを作りたく、下記のように途中まで書きました。 もしよろしければ、続きを教えていただけると嬉しいです。 ============================================================ <form name="form"> <select name="select_sort" onmouseover=“hantei( )”> <option value="">場所によって中身が変わるよ</option> </select> </form> <script type="text/javascript" language="JavaScript"> <!-- var uekara = new Array(“上から”,”上1”,”上２”,”上３”); var sitakara = new Array("下から”,”下1”,”下2”,”下3”); function hantei ( ) if（セレクトボックスの表示位置が半分より上ならば ） createSelection( form.elements['select_sort'], "(場所によって名前が変わるよ)", uekara, uekara); 違うならば createSelection( form.elements['select_sort'], "(場所によって名前が変わるよ)", sitakara, sitakara); </select>

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

考え方と方法のみですが。 1）　要素の位置はoffsetLeft、offsetTopなどを親要素を辿って加算することで算出可能です。 http://hkom.blog1.fc2.com/blog-entry-220.html http://d.hatena.ne.jp/susie-t/20061004#20061004f6 2）　ブラウザのウィンドウサイズやスクロールの量は、ブラウザの種類や表示モードによって異なりますが、こんな感じで取得可能です。 http://archiva.jp/web/javascript/get_page-size.html http://yakinikunotare.boo.jp/orebase/index.php?Javascript%2F%A5%D6%A5%E9%A5%A6%A5%B6%A4%CE%A5%B9%A5%AF%A5%ED%A1%BC%A5%EB%CE%CC%A4%F2%BC%E8%C6%C0%A4%B9%A4%EB 3）　上記の1、2から対象要素の画面上での表示位置を計算して条件分岐すればよいのではないでしょうか？ （上記参考例はあくまでもサンプルですので、詳しくは、きちんと調べ直してください） クロスブラウザなどを考慮すると、それなりに面倒そうな気が… いっそのこと、画面をスクロールさせて要素を画面上部/下部に表示を限定した方が簡単そう。 それなら、scrollIntoView()とかだけですんでしまいますけれど…

tella8
質問者

お礼

お礼が遅れてしまい申し訳ありません。 丁寧にありがとうございます。 さっそくやってみます！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 3連セレクトボックスで選択肢を変更し条件を絞り込む

    現在、JavaScriptの勉強中です。 三つの連動したセレクトボックスを利用して選択肢を絞り込もうと考えています。 例えば最初のセレクトボックスで「都道府県」を選択させ、選んだ段階で、二番目のセレクトボックスに選んだ都道府県の中にある「市町村」を表示させる、 次に二番目の「市町村」の一つを選んだ段階で、三番目のセレクトボックスに選んだ「市町村」内の支店名を表示させ選択させる。というものです。 以下のようなソースがあるのですが、この内容だと、最初の選択肢の数が10個を超えた段階で次の選択肢が作動しなくなる事が、 動作上で確認されました。 一つのセレクトボックスの選択肢の数を100個程度、或いは、理論上無制限にするには、どの様にしたらよいかを考えています。 できれば、現在のソースのロジックの解説も併せて、ご教授頂ければ幸いです。 以下JavaScript内容--------------- var data = new Array("都道府県は？","東京都","神奈川","千葉"); var data0 = new Array("---"); var data1 = new Array("区は？","千代田区","中央区","品川区");　　　 var data2 = new Array("市町村は？","横浜市","川崎市");　　　　 var data3 = new Array("市町村？","千葉市","市原市");　　　　 var data10 = new Array("---"); var data11 = new Array("支店名は？","千代田1号店","千代田2号店","千代田3号店"); var data12 = new Array("支店名は？","中央区1号店","中央区2号店","中央区3号店","中央区4号店","中央区5号店"); var data13 = new Array("支店名は？","品川1号店","品川2号店"); var data20 = new Array("---"); var data21 = new Array("支店名は？","横浜1号店","横浜2号店","横浜3号店","横浜4号店"); var data22 = new Array("支店名は？","川崎1号店","川崎2号店","川崎3号店"); var data30 = new Array("---"); var data31 = new Array("支店名は？","千葉1号店","千葉2号店"); var data32 = new Array("支店名は？","市原1号店"); function SetList(objid, arr){ var obj = document.getElementById(objid); for(i=obj.length; i>=0; i--){ obj.options[i] = null; } for(i=0; i<arr.length; i++){ obj.options[i] = new Option(arr[i]); obj.options[i].value = arr[i];}} 以下、HTML内容--------------- <body onLoad="SetList('sel0', data);" style="margin:0px;"> <div> <form> <select id="sel0" name="sel0" style="width:160px;" onChange="SetList('sel2',data0);SetList('sel1', eval('data' + this.selectedIndex))"> <option>---</option> </select> <select id="sel1" name="sel1" style="width:160px;" onChange="SetList('sel2', eval('data' + document.forms[0].sel0.selectedIndex + this.selectedIndex))"> <option>---</option> </select> <select id="sel2" name="sel2" style="width:160px;"> <option>---</option> </select> </form> </div> </body>

  • select要素のvalueを配列で取得したいです

    select要素のvalueを配列で取得したく、下記のサンプルを動かそうと試みました。 <html> <head></head> <body> <form> <!-- ここに<select name="c1">～<select name="c20">の20個のselectがあるとする --> </form> <input type="button" value="はい" onclick="test(this.form)"> <script type="text/javascript"> function test ( form ) { var values = new Array(); for ( var i=0; i < 20; i ++ ) { var elm = form.elements['c'+i]; values[i] = elm.options[elm.selectedIndex].value; } } </script> </body> </html> このようなサンプルを動かそうとしたのですが、 var elm = form.elements['c'+i];のところの['c'+i]が正しくないようで 「elm is underfind」というエラーが出てしまいます <script> function myForm (form) { var values = new Array(); for ( var i=0; i<20; i++ ) { var elm = form.elements[i]; values[i] = elm.options[elm.selectedIndex].value; document.write(values[i] + "<br />"); } } </script> インデックス名を'c'+iからiにすると取得できるのですが、 ブラウザが読み込みをやめない状態になってしまいます。 select要素のnameはc1から始まりc20と何も換えていません。 何が間違っているのでしょうか。

  • select値でのフォームのaction値の変更

    以下のようなフォームでselectの値によって PHPでactionのURLを変更させるようなことは出来るでしょうか。 <form name="form" method="GET" action="ここをselect値により変更"> <input type="text" name="word" id="word" value="" /> <select name="select" id="select"><option selected="selected" value="01">値01</option> <select name="select" id="select"><option selected="selected" value="02">値02</option> <select name="select" id="select"><option selected="selected" value="03">値03</option> </select> </form> 以上、どうぞ宜しくお願い申し上げます。

    • ベストアンサー
    • PHP
  • セレクトメニューから背景色変更+アンカー

    セレクトメニューからページ内のアンカーに飛ばし、 さらに飛び先のオブジェクトに背景色をつけたいんですが、 どうスクリプトを書いたら良いわかりません。。。 javascriptに関しては初心者なので・・・ お詳しい方教えていただけると大変助かります！ htmlはこんな感じをイメージしてます↓ <html> <head> </head> <body> <form name="form1" method="post" action=""> <label> <select name="select" id="select"> <option>01</option> <option>02</option> <option>03</option> </select> </label> </form> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div> </body> </html>

  • <SELECT>内<OPTION>の内容を曜日で変えるには？

    <FORM name="BGM"> <SELECT name="change"> <OPTION selected>選曲♪</OPTION> <OPTION value="○○○.mid">曲１</OPTION> <OPTION value="○○○.mid">曲２</OPTION> <OPTION value="○○○.mid ">曲３</OPTION> <OPTION value="○○○.mid ">曲４</OPTION> </SELECT> 　<INPUT onclick="bgm_change()" type="button"> </FORM> 今、このような形で、<SELECT>を使ってBGMを４曲から選べる機能を成功させています。 この、<SELECT>の<OPTION>のプルダウンの内容を、 曜日ごとで変えたいと思っています。 今日の曜日を取得するJavascriptは、 Function WhatDayWeek() と言う名の関数で、 　　　　Week = new Array(7); DATE = new Date(); thisweek = Week[DATE.getDay()]; 以上のように作っていますが、 このJavascriptと、<SELECT><OPTION>をくっ付ける(反映させる)にはどう記述すればよいでしょうか？ 関数自体、この３行では足りないんでしょうか・・。 どなたかご教授下さい。

    • ベストアンサー
    • HTML
  • セレクトメニューで

    セレクトメニューで フレームを使った、複数のセレクトメニューで 今の状態だと、上のセレクトメニューは問題ないのですが 下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけに なってしまいます。 要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript"> <!-- // 設定開始 var target = "right"; // 設定終了 function jump(){ var url = document.form1.select1.options[document.form1.select1.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } // --> </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION>　　メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION>　　メニュー</OPTION> </select> </form></TD>

  • セレクトボックスのvalue値でactionを変更

    いつもお世話になっております。 メニュー（セレクトボックス）のvalue値によってフォームのactionの内容を変更する方法を探しています。 【JavaScript】ラジオボタンにより、formのaction内容を変更 http://okwave.jp/qa/q6003560.html という質問を見つけ、こちらのラジオボタンをセレクトボックスに変更したのですが、動作しません。 javascriptを変更しなくてはいけないのだとは思うのですが、まったくの素人のため、検討もつかず、相談に伺いました。 <script type="text/javascript"> <!-- function check(f){ var r=f.elements["aaa"]; var flg=false; var list={"A":"aaa.php","B":"bbb.php","C":"ccc.php"}; for(var i=0;i<r.length;i++){ if(r[i].checked){ f.action=list[r[i].value]; flg=true; break; } } } //--> </script> </head> <body> <form action="" onSubmit="return check(this)"> <input name="key" type="text" value=""> <select name="aaa"> <option value="" selected>Category</option> <option value="A">AAA</option> <option value="B">BBB</option> <option value="C">CCC</option> </select> <input type="button" value="Go"> </form> </body> </html> お分かりになる方、教えていただけると助かります。 よろしくお願いいたします。

  • セレクトボックスの選択状態について

    セレクトボックスの横にチェックボックスがあり、 チェックボックスON→セレクトボックスはAの内容 チェックボックスOFF→セレクトボックスはBの内容 となるものがあります。 問題は、これに値を保持する機能を付けたいのです。 例えば、チェックボックスにチェックがある状態でセレクトボックスの３番目の要素を選択していたとします。そこで、チェックをはずし一度Ｂの内容を表示させてから、再度チェックを付けＡの内容に戻した時に３番目の要素が選択されている状態にしたいです。逆の場合も同様にしたいです。アドバイスを頂けたらと思います。宜しくお願い致します。 <script type="text/javascript"> <!-- a = 0; b = 0; txt = {}; txt["A"] = new Array("設定なし","A1","A2"); txt["B"] = new Array("設定なし","B1","B2","B3"); function set(select_box,check_box){ if (document.forms[0].elements[check_box].checked) { key = "A"; b = document.forms[0].elements[select_box].options.selectedIndex; } else { key = "B"; a = document.forms[0].elements[select_box].options.selectedIndex; } while (document.forms[0].elements[select_box].options[0]){ document.forms[0].elements[select_box].options[0] = null; // セレクトボックスのメニューを消去 } for (i=0; i<txt[key].length; i++){ document.forms[0].elements[select_box].options[i] = new Option(txt[key][i],txt[key][i]); // セレクトボックスのメニューの項目を生成・表示テキストとvalue値を設定 } if (key = "A") { document.forms[0].elements[select_box].options.selectedIndex = a; } else if (key = "B") { document.forms[0].elements[select_box].options.selectedIndex = b; } } // --> </script>

  • JavaScript で動的に <SELECT>の<OPTION>を追加したい

    HTML の <FORM> の <SELECT> <OPTION VALUE="11">AAA</OPTION> の<OPTION >を JavaScript で設定しようと考えています。 方法ご存知の方いらっしゃいましたら、御教授願います。 また、JavaScript のメソッド／プロパティが網羅的に記述されている Web Page 等ありましたら、ぜひURLを教えてください。 よろしくお願い致します。

  • セレクトで選んだ数の計算方法

    初心者なので基本的な質問ですが、よろしくお願いします。 セレクトで選んだ数値が2つあり、その積を表示したいのです。 どうしたらよいでしょうか。 </script> <script langauage="JavaScript"> <!-- function calcNum(){ var num1 = parseInt(document.getElementById('s1').value); var num2 = parseInt(document.getElementById('s2').value); var kei = num1 * num2; } //--> </script> </head> <body> <form name="form1"> <select size="1" name="select2" id="s2" onchange="selectChange()"> <option value="5">　５</option> <option value="9">　９</option> </select> </form> <form name="form1"> <select size="1" name="select1" id="s1" onchange="selectChange()"> <option value="2">　２</option> <option value="12">１２</option> </select> </form> <input type="text" name="kei" size="10">　 <input type="button" value="計算" onmousedown="calcNum()"> スクリプトのところだけの抜粋でわかりにくいかもしれないのですが、 どのようにしたら良いか、教えてください。 根本的に違っているようでしたら、どうやればよいのか教えてください。 よろしくお願いします

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する