- ベストアンサー
フォームのテキストエリアに検索語を追加したい
- java初心者ですがよろしくお願いします。データベースで検索する際のキーワードを組み立てることで，悩んでいます。
- 入力フォーム"Kensaku"のテキストボックス"SerchWord"に，リストから選んだ内容を反映させたいと思っています。
- このままだと，大項目「料理」をクリックした後，中項目「肉系」をクリックすると，大項目の「料理」が無くなり，「肉系」のみが標示されてしまいます。本当は他にも大項目があり，また，小項目で，「国名」なども加えたいと思っています。”料理 肉系 中国”の様な，検索語を追加でテキストボックスに反映させる方法をお教え下さい。また，可能であれば，大項目をクリックした際には，中項目，小項目が消える形になるとBestです。よろしく御指導下さい。以下，リスト部分のプログラムを載せてあります。
- ruisu2008
- お礼率65% (13/20)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
関連するQ&A
- クリック→テキストボックスに追加
下記は、クリックすると、テキストボックスの文字が入れ代わります。こうでなく、「どれどれそれからどうした」と追加していくようにするにはどうしたらよいでしょうか？ <A HREF="javascript:function voi(){};voi()" onClick="document.myform.bun.value='どれどれ'">どれどれ</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="document.myform.bun.value='それから'">それから</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="document.myform.bun.value='どうした'">どうした</A><BR> <FORM name="myform"> <INPUT TYPE="TEXT" NAME="bun" SIZE="50"> </form>
- ベストアンサー
- JavaScript
- JavaScript document.writeについて
<ul id="font-size-change"> <li><a href="javascript:void(0)" onclick="setActiveStyleSheet('default'); return false;" />標準</a></li> <li><a href="javascript:void(0)" onclick="setActiveStyleSheet('large'); return false;" />大</a></li> </ul> 上記を、JavaScriptの「document.write」を使って表示しようと、下記のコードを書きました。 function fontSizeChange(){ document.write('<ul id="font-size-change">'); document.write('<li><a href="javascript:void(0)" onclick="setActiveStyleSheet'); document.write("('default'); "); document.write('return false;" />標準</a></li>'); document.write('<li><a href="javascript:void(0)" onclick="setActiveStyleSheet'); document.write("('large'); "); document.write('return false;" />大</a></li>'); document.write('</ul>'); } とっても効率が悪い記述だと思うのですが、 もっとシンプルで効率の良い書き方はないでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- onclickでテキストエリアの末尾にカーソルを入れるには
<A HREF="javascript:function voi(){};voi()" onClick="document.main.message.value='私たちは'">記入する</A> 上記をクリックしたときにテキストエリアに「私たち」が入力されますが、そのあとにカーソルを持っていく方法をお知らせいただけないでしょうか。
- ベストアンサー
- JavaScript
- JavaScriptで折りたたみメニュー
現在、JavaScriptを利用して折りたたみメニューを作成しました。 2つの項目の下にそれぞれ下層メニューがあり、各項目をクリックするごとに下層メニューが開いたり閉じたりできる状態なのですが、 このどちらかの項目をクリックしたとき、その項目の下層メニューは表示されるが、もう一方の項目の下層メニューは閉じる。というようにするにはどうすればよいでしょうか？（両方の下層メニューが同時に開いている状態が無いように。） よろしくお願いいたします。 【XHTML】 <ul> <li><a href="javascript:exMenu('treeMenu1')">項目1</a> <ul id="treeMenu1" style="display:none"> <li><a href="#">項目1-1</a></li> <li><a href="#">項目1-2</a></li> <li><a href="#">項目1-3</a></li> </ul> </li> <li><a href="javascript:exMenu('treeMenu2')">項目2</a> <ul id="treeMenu2" style="display:none"> <li><a href="#">項目2-1</a></li> <li><a href="#">項目2-2</a></li> <li><a href="#">項目2-3</a></li> </ul> </li> </ul> 【JavaScript】 function exMenu(tName) { tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; }
- ベストアンサー
- JavaScript
- クリックすると内容が展開されるリスト
親項目をクリックすると、隠れていた子項目が表示され、 再び親項目をクリックすると、子項目が隠れる。 といったページを作成するため（http://www.openspc2.org/reibun/javascript/mouse/060/index.html）より、サンプルをいただきました。 これを、さらに ・「ダブルクリックではなく、シングルクリックで開閉」 ・「１つだけ展開し後はたたむのではなく、展開したものは閉じる操作をするまで展開している」 というように変換したいと思っています。 （JavaScript等、かなりの初心者です。できるだけ単純かつ分りやすい方法で作成したいと考えております。） お知恵を貸してください。 自分の要望に近いサンプルコードを探しましたが、コードが複雑で理解できず、皆さんへご質問している次第です。 ＝＝＝＝＝＝＝＝＝＝＝＝＝（以下、コード）＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <title>ページの名前</title> <script> window.onload=function(){ setNavi(); hideNavi(); } function setNavi(){ var tags=document.getElementById("navi").getElementsByTagName("a"); for(var i=0;i<tags.length;i++){ if(tags[i].href.match(/#$/)) tags[i].onclick=disp; } } function hideNavi(){ var n=document.getElementById("navi").firstChild; while(n){ if(n.nodeName=="LI") n.className="hide"; n=n.nextSibling; } } function disp() { var pp=this.parentNode.parentNode; var flg=pp.className=="hide"; hideNavi(); pp.className=flg?"":"hide"; return false; } </script> <style> #navi,#navi ul{ margin:0px; padding:0px; list-style:none; } #navi li.hide ul{ display:none; } </style> </head> <body> <ul id="navi"> <li> <div><a href="#">☆★☆スパゲッティー☆★☆</a></div> <ul> <li><a href="http://～">・カルボナーラ</a></li> <li><a href="http://～">・ペスカトーレ</a></li> <li><a href="http://～">・ペペロンチーノ</a></li> </ul> </li> <li> <div><a href="#">☆★☆どんぶり☆★☆</</a></div> <ul> <li><a href="http://～">・親子丼</a></li> <li><a href="http://～">・カツ丼</a></li> <li><a href="http://～">・天丼</a></li> </ul> </li> <li> <div><a href="#">☆★☆ファーストフード☆★☆</div> <ul> <li><a href="http://～">・ハンバーガー</a></li> <li><a href="http://～">・ホットドッグ</a></li> <li><a href="http://～">・フライドポテト</a></li> </ul> </li> </ul> </body> </html> ===============＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- スマートフォン用サイトのアコーディオンメニュー
スマートフォン用サイトのアコーディオンメニューを作成しています。 http://html-five.jp/140/ こちらのサイト様の情報をもとに2段のメニューが作ろうと思ったのですが、 空白のページが表示されてしまいますが、どこを修正したらよいのかわかりません。 記述したものは下記のとおりです。 解答よろしくお願いいたします。 <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <script type="text/javascript"> $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); </script> <div> <ul> <li> <p><span>LIST 6</span></p> <ul> <li> <p><span>LIST 6-1</span></p> <ul> <li><a href="page01.html">LIST 6-1-1</a></li> <li><a href="page01.html">LIST 6-1-2</a></li> <li><a href="page01.html">LIST 6-1-3</a></li> </ul> </li> <li> <p><span>LIST 6-2</span></p> <ul> <li><a href="page01.html">LIST 6-2-1</a></li> <li><a href="page01.html">LIST 6-2-2</a></li> <li><a href="page01.html">LIST 6-2-3</a></li> </ul> </li> <li> <a href="page01.html">LIST 6-3 (not to open)</a> </li> </ul> </li> <li> <p><span>LIST 7</span></p> <ul> <li> <p><span>LIST 7-1</span></p> <ul> <li><a href="page01.html">LIST 7-1-1</a></li> <li><a href="page01.html">LIST 7-1-2</a></li> <li><a href="page01.html">LIST 7-1-3</a></li> </ul> </li> <li> <p><span>LIST 7-2</span></p> <ul> <li><a href="page01.html">LIST 7-2-1</a></li> <li><a href="page01.html">LIST 7-2-2</a></li> <li><a href="page01.html">LIST 7-2-3</a></li> </ul> </li> <li> <p><span>LIST 7-3</span></p> <ul> <li><a href="page01.html">LIST 7-3-1</a></li> <li><a href="page01.html">LIST 7-3-2</a></li> <li><a href="page01.html">LIST 7-3-3</a></li> </ul> </li> </ul> </li> </ul> </div> </body>
- ベストアンサー
- JavaScript
- ＮＮでだけリストの一番上の項目がずれます。
IE、Opera、Firefox では問題なく表示されますが、Netscapeでだけ、リストの最初の項目の位置がずれます。 どうやら、ＣＳＳの li {margin: 0; padding: 4px;} が反映されていないようです。 <div id="xxx"><a name="aaa" /> <!-- Menu --> <div class="navi"> <ul> <li><a href="#aaa">ホーム</a></li> <li><a href="#bbb">あいう</a></li> <li><a href="#ccc">えおか</a></li> </ul> </div> <!-- Content --> <div class="content">中身</div> </div> 「ホーム」がずれます。 正しく反映させる方法はありますでしょうか？
- ベストアンサー
- ブログ
- ＣＳＳ初心者です
初 挑戦です ビルダー１１を使って製作中です （ 項目をクリックすることで深い階層が現れるリストを製作しています ） いろんなサイトで調べているのですがイマイチ解りません 今 このサイトを参考にしています http://allabout.co.jp/gm/gc/377237/2/ でも、さっぱり解りません 理屈は解るのですが、 ・何処にＣＳＳを記入するのか ・JavaScriptソースをどこに記入するのか いろいろ、試しましたが上手くいきません 例 HTMLソース <ul> <li><a href="url">項目A</a> <ul> <li><a href="url">サブ項目A-1</a></li> <li><a href="url">サブ項目A-2</a></li> <li><a href="url">サブ項目A-3</a></li> </ul> </li> <li><a href="url">項目B</a> <ul> <li><a href="url">サブ項目B-1</a></li> <li><a href="url">サブ項目B-2</a></li> <li><a href="url">サブ項目B-3</a></li> </ul> </li> <li><a href="url">項目C</a> <ul> <li><a href="url">サブ項目C-1</a> <ul> <li><a href="url">サブサブ項目C-1-a</a></li> <li><a href="url">サブサブ項目C-1-b</a></li> <li><a href="url">サブサブ項目C-1-c</a></li> </ul> </li> <li><a href="url">サブ項目C-2</a></li> <li><a href="url">サブ項目C-3</a></li> </ul> </li> </ul> 例 ＣＳＳ a.menu { text-decoration: none; border: 1px solid #8080ff; background-color: #ccccff; padding: 1px; } 例 JavaScriptソース <script type="text/javascript"><!-- function sublist( target ) { var TargetList = target.parentNode.getElementsByTagName('ul'); if ( TargetList[0].style.display == 'none' ) { TargetList[0].style.display = 'block'; } else { TargetList[0].style.display = 'none'; } } // --></script> 初心者です 解りやすく アドバイスお願いします
- ベストアンサー
- CSS
- cssで、入れ子になったリストに別のデザインを適用したくてつまづいてい
cssで、入れ子になったリストに別のデザインを適用したくてつまづいています。 ■ソース <ul id="column-topmenu"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a> <ul class="sub"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> </ul> </li> <li><a href="#">●●●</a> </li> </ul> ■CSS（親リストの指定） ul#column-topmenu li { padding: 15px 20px 15px 25px; list-style:none; background: url(../img/title2_bg.gif) no-repeat; font-size: 17px; line-height: 1.1; } 親要素のリストには、背景画像をつけるのですが、 入れ子のほうには背景画像なしで、テキストを整形して並べるだけです。 システムで生成する関係上、<li>にはIDを振ることができません。 <ul>は可能です。 入れ子のulには、subとつけて、試行錯誤しているのですが、 どうしても背景画像が反映してしまって・・・。 ご教示ください。 よろしくお願いします。
- 締切済み
- HTML
- Jqueryでリストのスクロール
<ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が リストの先頭にスクロールするするサンプルを試しに作成してみました。 Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに 微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる にはどのようにすればよろしいでしょうか。 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.update-scroll li").click(function() { $("ul.update-scroll li").each(function(){ // 既に選択済の場合、選択を解除 if( $(this).hasClass("selected") ) { //alert( $(this).text() ); $(this).toggleClass("selected"); } }); // 選択済に変更 $(this).toggleClass("selected"); // 選択済の位置がリストの先頭に来るようにスクロール //var i = $(this).index(); var p = $(this).offset().top; //alert(p); $("ul.update-scroll").animate({ scrollTop: p }, "fast"); }); }); </script> <title>CSS</title> <style type="text/css"> ul.update-scroll { list-style-type: none; width: 400px; height: 100px; overflow-y: scroll; border: 2px solid #bbb; padding-left: 1.5em; } ul.update-scroll li { margin-top: 0.3em; } ul.update-scroll li.selected { background:red; } ul.update-scroll a { text-decoration: none; } </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <ul class="update-scroll"> <li>[2010/01/03]： <a href="javascript:void(0);">項目10</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目9</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目8</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目7</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目6</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目5</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目4</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目3</a></li> <li>[2010/01/02]： <a href="javascript:void(0);">項目2</a></li> <li>[2010/01/01]： <a href="javascript:void(0);">項目1</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
お礼
早速の回答ありがとうございました。 質問する前に”+”を付けてやってみたんですが，できなかったので，違う方法でと考えていました。しかし，もう一度やってみると，…できました。多分入力ミスなんでしょうね…。 ともあれ，無事できました。本当にありがとうございました！！