JavaScriptで条件付きのコンテンツ絞り込み機能を実装する方法
- JavaScriptのみで地域やクラス、性別などの条件に基づいてコンテンツを絞り込む機能を実現する方法について説明します。
- 条件に合う絞り込みを実行するとコンテンツが表示され、該当しないものは非表示になります。条件を変更して再度実行することも可能です。
- 条件を指定しないで実行ボタンを押すと全てのコンテンツが表示されます。条件に合うコンテンツがない場合は「見つかりませんでした」と表示されます。
- ベストアンサー
javascriptのみでコンテンツを絞り込みたい
地域やクラス、性別などの条件を指定して コンテンツを絞り込む機能を実現したいです。 こういった機能はサーバーサイトのプログラムを普通は使うと思うのですが、 javascriptのみで作りたいです。その理由ですが、 javascriptを勉強中なので、近い将来自分で手直しできるからです。 サーバーサイドのプログラムはjavascriptの後に学びたいと思っています。 要望の詳細は下記８つです。 １）初めはコンテンツが表示された状態 ２）１つまたは複数の条件に合う絞り込みを実行し、該当しないものは非表示 ３）全ての項目で「指定しない」で実行ボタンを押すと全てのコンテンツを表示 ４）条件に合うコンテンツがない場合は、全てのコンテンツを消した状態で「見つかりませんでした」というテキストを表示 ５）実行ボタンを押した後に、条件をかえて最後実行可能 ６）リセットボタンは不要 ７）コンテンツの数は500ほど。それぞれの情報を頻繁に変更するため、修正が楽な方法がよいです。地域・クラスなどの項目はまだいくつか増えます。 ８）windowsXP、Vistaの32bitと64bit、7に対応 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <style></style> <script></script> </head> <body> <body> <form> <ol> <li> 地域: <select name=""> <option value="">指定しない <option value="">神奈川県 <option value="">山梨県 <option value="">北海道 </select> </li> <li> クラス: <select name=""> <option value="">指定しない <option value="">クラスA <option value="">クラスB <option value="">クラスC </select> </li> <li> 性別: <select name=""> <option value="">指定しない <option value="">男性 <option value="">女性 </select> </li> <li> 年齢: <select name=""> <option value="">指定しない <option value="">20歳未満 <option value="">20歳以上30歳未満 <option value="">30歳以上40歳未満 <option value="">40歳以上 </select> </li> <li> 学校名: <select name=""> <option value="">指定しない <option value="">あ <option value="">い <option value="">う </select> </li> <li> 体重: <select name=""> <option value="">指定しない <option value="">50kg未満 <option value="">50kg以上60kg未満 <option value="">60kg以上70kg未満 </select> </li> </ol> <img src="" onclick="" alt="検索の実行" /> </form> <!-- ↓コンテンツ↓ --> <ul> <li> <ol> <li>地域：神奈川県</li> <li>クラスA</li> <li>性別：男性</li> <li>年齢：25歳</li> <li>学校名：あ</li> <li>体重：55kg</li> <li>名前：ジャバ スクリプト</li> </ol> </li> <li> <ol> <li>地域：神奈川県</li> <li>クラスC</li> <li>性別：女性</li> <li>年齢：33歳</li> <li>学校名：う</li> <li>体重：42kg</li> <li>名前：グー</li> </ol> </li> </ul> </body> </html>
- tekkenman7
- お礼率70% (150/212)
- JavaScript
- 回答数6
- ありがとう数2
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
こんばんは、ながいのでぶんかつします。 <!DOCTYPE html> <html lang="ja"> <title></title> <style> #NONE { display:none} </style> <body> <form> <ol> <li> 地域: <select name="a" onchange="find()"> <option value="">指定しない <option value="神奈川県">神奈川県 <option value="山梨県">山梨県 <option value="北海道">北海道 </select> </li> <li> クラス: <select name="b" onchange="find()"> <option value="">指定しない <option value="クラスA">クラスA <option value="クラスB">クラスB <option value="クラスC">クラスC </select> </li> <li> 性別: <select name="c" onchange="find()"> <option value="">指定しない <option value="男性">男性 <option value="女性">女性 </select> </li> <li> 年齢: <select name="d" onchange="find()"> <option value="">指定しない <option value="0,20">20歳未満 <option value="20,30">20歳以上30歳未満 <option value="30,40">30歳以上40歳未満 <option value="40,200">40歳以上 </select> </li> <li> 学校名: <select name="e" onchange="find()"> <option value="">指定しない <option value="あ">あ <option value="い">い <option value="う">う </select> </li> <li> 体重: <select name="f" onchange="find()"> <option value="">指定しない <option value="0,50">50kg未満 <option value="50,60">50kg以上60kg未満 <option value="60,70">60kg以上70kg未満 </select> </li> </ol> <img src="" onclick="" alt="検索の実行" onchange="find()"> </form> <!-- ↓コンテンツ↓ --> <ul id="HOGE"> <li> <ol> <li>地域：神奈川県</li> <li>クラスA</li> <li>性別：男性</li> <li>年齢：25歳</li> <li>学校名：あ</li> <li>体重：55kg</li> <li>名前：ジャバ スクリプト</li> </ol> </li> <li> <ol> <li>地域：神奈川県</li> <li>クラスC</li> <li>性別：女性</li> <li>年齢：33歳</li> <li>学校名：う</li> <li>体重：42kg</li> <li><em>名前：グー</em></li> </ol> </li> </ul> <div id="NONE"> <p>コンテンツがありません</p> </div> <script> (function () { var A = Array.prototype; var reg_data_format = /^\s*(.+)：((\d+)?(.+))\s*$/; //ラベル,データ,数値,単位 var reg_trim = /^\s+|\s+$/g; function getTextContent (node) { return (3 === node.nodeType) ? node.data.replace (reg_trim, '') : (node.hasChildNodes ()) ? A.map.call (node.childNodes, arguments.callee).join ('') : ''; } function isLiTag (n) { return ('LI' === n.nodeName); } function isTdTag (n) { return ('TD' === n.nodeName); } function ListFinder (node, depth) { this.node = node; this.depth = depth; this.value = []; } function setSelected (state) { this.value.forEach (function (v) { v.selected = this.state; }, { state: !!state }); } function getSelectedNode () { return this.value.reduce ( function (a, v) { return (v.selected) ? a.concat(v.node): a; }, []); } function select (cond, logic) { if (0 === arguments.length || 'function' !== typeof cond) return null; return this.value.filter (function (v) { var result; switch (this.logic) { case 'and' : case '+' : if (v.selected) v.selected = result = !! this.cond (v); break; case 'or' : case '-' : if (! v.selected) { result = !! this.cond (v); if (result) { v.selected = result; } } break; default : v.selected = result = !! this.cond (v); break; } return result; }, { cond: cond, logic: logic }).map (function (v) { return v.node; }); } function getChildNodes (li) { var value = []; var data, ary, obj; for (var node = li.firstChild; node; node = node.nextSibling) { switch (node.nodeType) { case 1 : switch (node.tagName) { case 'IMG' : if (node.alt) value.push (node.alt); break; case 'UL' : case 'OL' : case 'TABLE' : case 'DL' : if (0 < this.depth) { obj = create (node, this.depth -1); value.push (obj.getData ()); } else { value.push (getTextContent (node)); } break; } break;
その他の回答 (5)
- babu_baboo
- ベストアンサー率51% (268/525)
むだにかいとうがおおいものです indexOf のかいしゃくがちがいます これには、２しゅるいあります。 String.indexOf https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/String/indexOf Array.indexOf https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array/indexOf こんかいは、はいれつでりようしています https://developer.mozilla.org/ja/JavaScript
- babu_baboo
- ベストアンサー率51% (268/525)
あ～、わたしからせいつめいをきいたりしてだいじょうぶ？ -- >Array.prototype.filter.call(変数,実行させるもの) >Array.prototype.forEach.call ふだんならこうつかうはず。 var ary = [0,1,2,3,4,5,6,7,8,9].filter (function (n) { return !(n%2); });//ary=偶数 <ol id="hoge"> <li>0 <li>1 <li>2 <ol> しかし、のーどりすうとのばあいつかえない。 document.querySelectorAll ('#hoge > li') .filter (function (e) {return !((+e.textContent)%2));}); //だめ そんなときは、いかのようにするとつかえる Array.prototype.filter.call (document.querySelectorAll ('#hoge > li'), function (e) {return !((+e.textContent)%2));}); -- >.ownerDocument ここにでかいとうするひとも、ownerDocument をつかうひとはすくないですね。 document は、ぐろーばるです。なので、「グローバルへんすうをつかわないように」 といっているひとさえ、それをつかったりします。 「いべんとはんどら」などでよくつかいます。 document.addEventListener ('click', function (event) { var node = event.target; var doc = event.ownerDocumen; document.getElementById ('hoge').innerHTML = '<p>abc</p>'; }, false); でもフレームをつかったぺーじなどのばあい、doc === document でないときがあるので かくじつにいべんとがおこなわれた document をしるすべとしてつかったりします。 -- >.textContent.match これは、わけてかんがえてください node.textContent HTMLようそにふくまれるてきすと（もじれつ）をかえす。ie なら .innerText です。 string.match これは、せいきひょうげんにあります -- >this.style.display = 'none'; おそらくその this は、LI ようそのときのことだとおもいます。 すたいるしーとで、よくしていしますよね、。 すくりぷとからへんこうするばあいにつかいます。 <style> li { width:100px; display: none; } </style> -- >.parentNode.parentNode のーどのおやのおや。じいさんですね。def の liようそからみれば abc の liようそです。 ul からみれば ol。 げんじつせかいとちがい、「こ」はたくさんあっても「おや」は１つです。 <ol> <li>abc <ul> <li>def ところで、このせつめいはここだけのはなしにしてくださいね。 「出典」は、ごじぶんでさがしてください。 ぎょうしゃにいらいしたほうが、はるかによいこーどだと・・・。 それから、こんかいしつもんのしかたが、わるいとおもいます。 おもいっきり、さくせいいらいです。かいとうがつきにくいです。 がっつりかいてくれるひとは、すくないとおもいます。 しつもんは、こわけして、かいとうしゃのこころを、ゆさぶるようなしもんならくいつかも。 さすがに「２３歳OLです。」みたいなのには、もうくいつきませんが。 おそわったことを、てきとうにつたえていると、芯のない画鋲をさされることもある？（笑）
- babu_baboo
- ベストアンサー率51% (268/525)
あちゃぁ～その２ var a = ListFinder.create (node1); var b = ListFinder.create (node2); に。 > <li>の中に：がなければ、もっと短くすんだのでしょうか。 きっとちょっとだけみじかくなるけど、そもそもその ＬＩ ようそのなかにある、まーくあっぷがへんなんだよ <li><label>年齢</label><span class="value">3</span><span class="unit">ちゅ</span></li> みたいになるのかな？ でもそれをかいせきすると、おれのりきりょうじゃみじかくならないな。 むしろ、ＬＩ ようそでなく、table こうぞうからよみとり、ひょうじさせて、でーただけ、createElement をつかって、つくりだしてひょうじすればよい。つくりだすなら、たんいなんて、てーぶるだった、ｔｈようそに、年齢（歳）とかしておけるし。 まえのかいとうで、すくりぷとがわにでーたをもつと、すくりぷとがむこうだとなにもひょうじされないよ。 でーたをとりこんで、ひつようなものだけを、いろいろなかたちでひょうげんできるようになると、いいですよね。
- babu_baboo
- ベストアンサー率51% (268/525)
> 性別のところで あちゃぁ～ごめん。 > <li>の中の：を消すと機能しなくなってしまいます。 そうじゃないんだなぁ～ var reg_data_format = /^\s*(.+)：((\d+)?(.+))\s*$/; //ラベル,データ,数値,単位 と、 value.push ({label: ary[1], text: ary[2], number: Number (ary[3]), unit: ary[4]}); せいきひょうげんで、もし、li ようそに "：" があるのならば、 value.label になり、それいこうが .text になり、 もし、.text のさいしょが、すうちならば、.number に、すうちのあとにもじれつがあれば、.unit にだいにゅうされる。 .value の、はいれつも１つなら、はいれつをはずしてるので、もくてきの value のあたいをみつけてね。 もし、"：" がないときは、そのまま .value にないかな？ > 意図的に欠陥を作ったということですか？ べんきょうは、じぶんのためです。いとてきにではなく、ひつぜんてきにはいりこむのだ！ >>>ListFinder.create でつくったおぶじぇくとのでーたをかいへん var a = ListFinder.create (node1); var b = ListFinder.create (node1); このようにすると、finder がふたつでき、それぞれをせいぎょできる。 そして、 a.value[1].value[4].number = 4; みたいにしても、でーたをへんこうすることはできない。 ぷろぐらむをつくるときは、じょうぶにつくるのだそうだ。そしてへんこうにもつよく。 なので、かってにでーたをいじられないようにつくる。 いまは、そのためのべんきょうちゅうでもあります。 > tableを入れて何をしようとしていたのか気になります。 でーたのならびは、りすとこうぞうだけではありません。 てーぶるだって、りっぱなでーたのりすとこうぞうです。 とりこんでしまえれば、おなじようにせいぎょできます。 もし、できたならべんりではありませんか？ そうそう、IE7 とか IE8 とかでうごかすのなら if(!Array.prototype.filter)Array.prototype.filter=function(b,e){var f=this.length;if(typeof b!="function")throw new TypeError;for(var c=[],a=0;a<f;a++)if(a in this){var d=this[a];b.call(e,d,a,this)&&c.push(d)}return c}; if(!Array.prototype.forEach)Array.prototype.forEach=function(b,c){var d=this.length;if(typeof b!="function")throw new TypeError;for(var a=0;a<d;a++)a in this&&b.call(c,this[a],a,this)}; if(!Array.prototype.every)Array.prototype.every=function(b,c){var d=this.length;if(typeof b!="function")throw new TypeError;for(var a=0;a<d;a++)if(a in this&&!b.call(c,this[a],a,this))return false;return true}; if(!Array.prototype.map)Array.prototype.map=function(b,e){var c=this.length;if(typeof b!="function")throw new TypeError;for(var d=Array(c),a=0;a<c;a++)a in this&&(d[a]=b.call(e,this[a],a,this));return d}; if(!Array.prototype.some)Array.prototype.some=function(b,c){var d=this.length;if(typeof b!="function")throw new TypeError;for(var a=0;a<d;a++)if(a in this&&b.call(c,this[a],a,this))return true;return false}; if(!Array.prototype.reduce)Array.prototype.reduce=function(d){var c=this.length;if(typeof d!="function")throw new TypeError;if(c==0&&arguments.length==1)throw new TypeError;var a=0;if(arguments.length>=2)var b=arguments[1];else{do{if(a in this){b=this[a++];break}if(++a>=c)throw new TypeError;}while(1)}for(;a<c;a++)a in this&&(b=d.call(null,b,this[a],a,this));return b}; if(!Array.prototype.reduceRight)Array.prototype.reduceRight=function(d){var c=this.length;if(typeof d!="function")throw new TypeError;if(c==0&&arguments.length==1)throw new TypeError;var a=c-1;if(arguments.length>=2)var b=arguments[1];else{do{if(a in this){b=this[a--];break}if(--a>=c)throw new TypeError;}while(1)}for(;a>=0;a--)a in this&&(b=d.call(null,b,this[a],a,this));return b}; とか。
- babu_baboo
- ベストアンサー率51% (268/525)
case 3 : data = node.data.replace (/^\s+|\s+$/g, ''); if (ary = data.match (reg_data_format)) value.push ({label: ary[1], text: ary[2], number: Number (ary[3]), unit: ary[4]}); else if (data) value.push (data); break; } } // return {node: li, value: value }; return {node: li, value: (value.length == 1) ? value[0]: value, selected: false }; } //__ function convertByList () { this.value = A.filter.call (this.node.childNodes, isLiTag).map (getChildNodes, this); } function convertByDl () {;} function convertByTable () {;} //__ function convert () { switch (this.node.tagName) { case 'UL' : case 'OL' : convertByList.call (this); break; case 'DL' : convertByDl.call (this); break; case 'TABLE' : convertByTable.call (this); break; } } function create (node, depth) { if (0 === arguments.length) return null; var obj = new ListFinder (node, depth); var func = new Function; convert.call (obj); func.convert = (function () { convert.apply (obj, arguments); }); func.setSelected = (function () { setSelected.apply (obj, arguments); }); func.getData = (function () { return obj.value.slice (0); }); func.select = (function () { return select.apply (obj, arguments); }); func.getSelectedNode = (function () { return getSelectedNode.apply (obj, arguments); }); return func; } ListFinder.create = create; this.ListFinder = ListFinder; })(); var finder = ListFinder.create (document.getElementById ('HOGE'),2); function find () { var doc = document; var select = doc.getElementsByTagName ('select'); var cond, value; var max, min; var mess = doc.getElementById ('NONE'); var contents = doc.getElementById ('HOGE'); finder.setSelected (true); if (value = select[0].value) finder.select ((function (v) { return (v.value[0].value.text === value); }), 'and'); if (value = select[1].value) finder.select ((function (v) { return (v.value[1].value === value); }), 'and'); if (value = select[2].value) finder.select ((function (v) { return (v.value[2].value === value); }), 'and'); if (value = select[3].value) { value = value.split (','); min = +value[0]; max = +value[1]; finder.select ((function (v) {var v = v.value[3].value.number; return (min<=v && v <max); }), 'and'); } if (value = select[4].value) finder.select ((function (v) { return (v.value[4].value.text === value); }), 'and'); if (value = select[5].value) { value = value.split (','); min = +value[0]; max = +value[1]; finder.select ((function (v) {var v = v.value[5].value.number; return (min<=v && v <max); }), 'and'); } var disp = finder.getSelectedNode (); var all = finder.getData (); all.forEach (function (d) { d.node.style.display = (this.indexOf (d.node) < 0) ? 'none': 'list-item'; }, disp); if (disp.length) { mess.style.display = 'none'; } else { mess.style.display = 'block'; } } </script> もう、めでおうだけではたいへんかもしれませんね。じぶんでもたいへん。 りすとこうぞうを、いったんおぶじぇくとにします。もんだいなのは、liようその、'：' でくぎっているところ。 かってに、せいきひょうげんでぶんかつ。 find かんすうで、つくられたおぶじぇくとをそうさしています。 なんでこんなめんどうにかいているかは、もちろんべんきょうのためです。 ListFinder.create でつくったおぶじぇくとのでーたをかいへんできないようにとか・・・ table ようそとかは、つかれたのでしょうりゃくしました。
お礼
また詳しいコードを作って頂きありがとうございます。 ボタンを押して実行のみとい形ではなかったので select属性のonchange="find()"を削除し、 <img src="" alt="検索の実行" onchange="find()"> のonchangeをonclickに変更して機能しました。 性別のところで男性を選択して実行すると 男性があるのに「コンテンツがありません」とでてしまうので、 function find ()の return (v.value[2].value. === value) を return (v.value[2].value.text === value) として機能するようになりました。 >りすとこうぞうを、いったんおぶじぇくとにします。 >もんだいなのは、liようその、'：' でくぎっているところ。 >かってに、せいきひょうげんでぶんかつ。 find かんすうで、 >つくられたおぶじぇくとをそうさしています。 何を言いたいのか分かりませんでしたが、 <li>の中の：を消すと機能しなくなってしまいます。 クラスの検索を除いて、他の選択では「文字：文字」を付けないと機能しないです。 2時間ほどかけてあれこれやりましたが、ダメでした。 <li>の：がプログラムを作るときに問題になるので <li>も含め中身をコード化してそれを操作する という意味だったのですね。 もちろん、その方法は勉強＆活用させて頂くのですが、 もし<li>の中に：がなければ、もっと短くすんだのでしょうか。 全ての<li>に：を入れないとした場合、 find ()の中の一部を変えて、find (){～～～}だけにすれば動きますか？ ヒントだけでも教えて頂きたいです。 >なんでこんなめんどうにかいているかは、もちろんべんきょうのためです。 「べんきょうのため」・・・意図的に欠陥を作ったということですか？？？ もしそうなら、きっちり勉強に使わせて頂くつもりなのでそうしなくても大丈夫です。 >ListFinder.create でつくったおぶじぇくとのでーたをかいへんできないようにとか・・・ これは、調べてみたのですが分かりませんでした。 これを入れると何が起きるのですか？ >table ようそとかは、つかれたのでしょうりゃくしました。 tableを入れて何をしようとしていたのか気になります。
関連するQ&A
- mouseoverのコンテンツ内でselectタグ
jQueryでマウスオーバーで、あるコンテンツを表示する仕組みを作って、 そのコンテンツ内にプルダウンを表示したいのですが、 <option>の選択肢にカーソルを合わせると、コンテンツが閉じてしまい、困っています。 （メガメニュー？のようなイメージです。IEとFireFoxで検証しています。） ↓のようなソースを書いているのですが、どこがいけないのでしょうか。。 --------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ //一旦非表示 $('#cont').hide(); //ここから表示設定 $('#hoge').mouseover(function(){ $('#cont').show(); }).mouseout(function(){ $('#cont').hide(); }); }); </script> <style type="text/css"> #hoge {margin:0; padding:0;} #cont {padding:100px; position:absolute; background-color: rgba(0, 0, 0, 0.5);} </style> </head> <body> <ul> <li id="hoge"> <a >hoge</a> <div id="cont"> <form method="get"> <select> <option value="">選択してください</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> <input type="button" value="検索" /> </form> </div> </li> <li>…</li> <li>…</li> </ul> </body> </html> --------------------- わかる方いらっしゃいましたら、ヒントいただけると嬉しいです。。 よろしくお願いいたしますm(__)m
- 締切済み
- JavaScript
- 複数のjavascript
うまく説明できないのですが、 プルダウンメニューが１つならエラーは出ないのですが、 下記のようにプルダウンメニュー２つにするとエラーが出てしまいます。。 どのように分ければエラーが出ないでしょうか・・・？ 出来ればスッキリした形がベストなんですが・・・。 どうか宜しくお願い致します。 ------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>step25</title> <META http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <script launguage="JavaScript"> <!-- function openlink(){ var n = document.f1.links.selectedIndex; if(n!=0){ location.href = document.f1.links.options[n].value; } } --> </script> </head> <body> <FORM name="f1"> <H2>美術館＆博物館のリンク集</H2> <select name="links" onChange="openlink()"> <option>リンク先を選択</option> <option value="http://www.momat.go.jp">1111</option> <option value="http://www.momak.go.jp">2222</option> <option value="http://www.nmwa.go.jp">3333</option> <option value="http://www.tnm.go.jp">4444</option> <option value="http://www.kyohaku.go.jp">5555</option> <option value="http://www.narahaku.go.jp">6666</option> </select> <select name="links" onChange="openlink()"> <option>リンク先を選択</option> <option value="http://www.momat.go.jp">1111</option> <option value="http://www.momak.go.jp">2222</option> <option value="http://www.nmwa.go.jp">3333</option> <option value="http://www.tnm.go.jp">4444</option> <option value="http://www.kyohaku.go.jp">5555</option> <option value="http://www.narahaku.go.jp">6666</option> </select> </FORM> </body> </html> ------------------------------------------------------------
- ベストアンサー
- JavaScript
- JavaScriptの入力フォーム
入力フォームについて、option valueを複数指定したいのですが、どうすればいいのでしょうか？ 例えば、ホビーを選択した際に"Hobbies"と"12345"という値が欲しいです。 カテゴリー選択 <select name="category"> <option value="Hobbies">ホビー</option> <option value="HomeImprovement">DIY用品</option> <option value="Jewelry">ジュエリー</option> …… </select>
- ベストアンサー
- JavaScript
- ドコモのSELECTタグ
ドコモのXHTMLのサイトを作っていますが、 １ページ内のSELECTタグの上限はありますでしょうか？ SA700iでは１５個しか表示されませんでした。 また、これは端末毎に違ってくるのでしょうか？ --------------------------------------------- <form> <select name=test1><option value=1></select> <select name=test2><option value=1></select> <select name=test3><option value=1></select> ・ ・ ・ <select name=testn><option value=1></select> </form> --------------------------------------------- 宜しくお願いします。
- ベストアンサー
- HTML
- optionのselectedは更新時は効かない？
最初に表示させたいoptionにselected="selected"を付けているのですが、 ブラウザの更新をしたときにselectedが効きません。 読み込んだときは指定通りになりますが、更新時は指定通りになりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" /> <title>サンプル</title> </head> <body> <form action="#"> <fieldset> <legend>順位１</legend> <select name="sss111" onchange="letsGO111()"> <option value="指定無し" selected="selected">指定無し</option> <option value="1位">1位</option> <option value="2位">2位</option> </select> </fieldset> <fieldset> <legend>順位２</legend> <select name="sss222" onchange="letsGO222()"> <option value="指定無し" selected="selected">指定無し</option> <option value="1位">1位</option> <option value="2位">2位</option> </select> </fieldset> </form> </body> </html>
- ベストアンサー
- HTML
- javascript 自動計算
現在フォームにて自動計算を作っています。 簡単にまとめますと3つのselectboxがあり、選んだ数字によって自動で合計がでてくるという仕様です。 例 <select name="score1"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score2"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score3"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p>合計（ここにはscore1とscore2とscore3の合計が表示される）</p> 数字を変えるたびに合計が変わるようにしたです。 valueに値が無い場合はなしと判断する。 コードの書き方がわからず困っています。 お分かりの方がいらっしゃいましたらご教示お願いいたします。
- ベストアンサー
- JavaScript
- javascriptについての質問です。複数の一つのselect等で選
javascriptについての質問です。複数の一つのselect等で選択した文字の値をinputに表示したいのですが <FORM> <SELECT NAME="select1"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" a">a</OPTION> <OPTION VALUE=" b">b</OPTION> <OPTION VALUE=" c"c</OPTION> </SELECT> <SELECT NAME="select2"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" 壱">壱</OPTION> <OPTION VALUE=" 弐">弐</OPTION> <OPTION VALUE=" 参">参</OPTION> </SELECT> <input TYPE="text" NAME="text1" VALUE=""> </FORM> とこの様なフォームがあるとしまして 各SELECT で選択した各文字を <input TYPE="text" NAME="text1" VALUE="">に追加したいんです。 SELECT一つなら出来たのですが 複数になると追加をどうするのかやり方がわからなくて・・・ 一つのセレクトは一つしか選択できなくなればなお良いのですが・・・ どなたがご教授願えないでしょうか?
- ベストアンサー
- JavaScript
- 【JavaScript】でラベル名を取得したい
【JavaScriptで】セレクトボックスからラベル名を取得する方法 下に書いたHTMLのセレクトボックスからラベル名を取得するにはどうしたらよいのでしょうか？ HTMLにvalue値をつけずにこのように記述すると、下記のJavaScriptの記述でラベル名が取得できます。 ***************** <select> <option>1月</option> <option>2月</option> <option>3月</option> </select> https://imgur.com/T8W1Umy ***************** ところが下記のようにvalueに値をつけるとvalueの値が出力されラベル名は表示されません。 都道府県名や名前など各々valueの値と、ラベル名が異なることはよくあることと思います。 以下に記述したHTML（valueの値がついたもの）のセレクトボックスからラベル名を取得するにはどのように記述したら良いのでしょうか？ 分かる方いらっしゃいましたら教えて下さい。宜しくお願いします。 （JS） 'use strict'; { document.querySelector('button').addEventListener('click', () => { const li = document.createElement('li'); const month = document.querySelector('select'); li.textContent = month.value; document.querySelector('ul').appendChild(li); }); } ---------------------------------------- （HTML） <select> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> </select> <button>Add!</button> <ul> </ul>
- ベストアンサー
- JavaScript
- javascript 問題と答え
独学でjsをやっているのですが、わからないところがあるので質問させてください。 ラジオボタンを選択し、解答ボタンクリックで、オレンジの欄に解答が出るようなプログラムを書いたのですが、実行されません。どこが間違っているのでしょうか。 /* ---------------- ▽▽▽ここから▽▽▽ -------------------------- */ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js問題</title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0;padding:0; } img{ border:0; } h1 { font-size:22px; } h2 { font-size: 12px; } #box { width: 500px; overflow:hidden; /*子要素にfloatがあり、高さ算出のため使用*/ } div.box { width: 150px; float: left; background-color: #CCC; margin-left: 10px; } li { list-style:none; } div#ans { width: 500px; height: 20px; clear:both; margin-top: 20px; margin-bottom: 30px; } div#ans p { width: 150px; background-color: #FC6; margin-left:10px ; float:left; } div#ans_btn { width: 200px; clear:both; margin-left:200px; } </style> </head> <body> <h1>Q.問題</h1> <br /> <div id="box"> <div class="box"> <ul> <h2>問題その１</h2> <li><input type="radio" name="q0" value="1">あいうえお</li> <li><input type="radio" name="q0" value="2">正解</li> <li><input type="radio" name="q0" value="3">あいうえお</li> <li><input type="radio" name="q0" value="4">あいうえお</li> </ul> </div> <div class="box"> <ul> <h2>問題その2</h2> <li><input type="radio" name="q1" value="1">あいうえお</li> <li><input type="radio" name="q1" value="2">あいうえお</li> <li><input type="radio" name="q1" value="3">正解</li> <li><input type="radio" name="q1" value="4">あいうえお</li> </ul> </div> <div class="box"> <ul> <h2>問題その3</h2> <li><input type="radio" name="q2" value="1">正解</li> <li><input type="radio" name="q2" value="2">あいうえお</li> <li><input type="radio" name="q2" value="3">あいうえお</li> <li><input type="radio" name="q2" value="4">あいうえお</li> </ul> </div> </div> <div id="ans"> <p>問い１答え</p> <p>問い2答え</p> <p>問い3答え</p> </div> <div id="ans_btn"> <input type="button" value="ここを押すと解答" onClick="saiten()"> </div> <script type="text/javascript"> var ans = ["2","3","1"]; function saiten(){ var p_node=document.getElementsByTagName("p"); for(var i=0;i<ans.length;i++){ if(ans[i]==document.getElementById("q"+i).value){ p_node[i].innerHTML = "正解"; }else{ p_node[i].innerHTML = "間違い"; } } } </script> </body> </html> /* ----------------△△△ここまで△△△------------------------ */ よろしくおねがいします。
- ベストアンサー
- JavaScript
- JavaScriptお知恵を貸してください
JavaScriptで以下のHTMLの記述で例えばコンボボックスのCさんを選択して"push"ボタンをおして担当者Aの表示と入れ替わりをしたいのですがなぜか２番目の値が表示されていしまいます。ちょっと原因がわからいのです。 ですがセレクトボックスを開くと順序が最初にCさん次に担当者Bさんとなっているのです。値はちゃんと入れ替わっているのですが表示の方が担当者Bが表示されています。 本来ソースを記載すればいいのですがちょっといそいでいるのと出先というのもありまして以下のHTML程度しか かけませんでした。返事の方は遅れてしまうのですが ご教授おねがいします。 <html> <head> <title></title> <script type="text/javascript"> <!-- //--> </script> <body> <form name="fm"> <table align="center"> <tr><td> <input type="button" name="botan" onClick="push()" value="push"> <select name="test" size="3"> <option value="10">Aさん</option> <option value="20">Bさん</option> <option value="30">Cさん</option> <option value="40">Dさん</option> <option value="50">Eさん</option> </select> <select name="test" size="1"> <option value="1">担当者A</option> <option value="2">担当者B</option> </select> </td></tr> </body> </html>
- 締切済み
- JavaScript
お礼
ありがとうございます。 <ul id="HOGE"> <li> <ol> <li><label>地域</label><span class="value">神奈川県</span></li> <li><label>クラス</label><span class="value">C</span></li> <li><label>性別</label><span class="value">女性</span></li> <li><label>年齢</label><span class="value">33歳</span></li> <li><label>学校名</label><span class="value">う</span></li> <li><label>体重</label><span class="value">42kg</span></li> <li><label>名前</label><span class="value">グー</span></li> </ol> </li> <li> <ol> <li><label>地域</label><span class="value">神奈川県</span></li> こんな感じにした場合に作り変えてみようと思い。 まずは、作って頂いたコードの意味を理解して、それを活用しよう。 そんなふうに意気込んで４時間、 英語を翻訳するように１つ１つの単語をネットで調べました。 任意で指定した変数名なのかどうかをコード全てを検索し変数でなければ、 ネットでその単語の使い方を調べるというやり方でやり、 部分的なことが分かったら全体的な動きを把握するつもりですが、 部分的な意味を調べるところで行き詰っています。 <span class="unit">ちゅ</span>は何だろうと思い消しちゃいました。 .querySelectorAll http://www.softel.co.jp/blogs/tech/archives/2085 .test http://www.scollabo.com/banban/jsindex/sample/sample_291.html .RegExp http://www.tohoho-web.com/js/regexp.htm#newRegExp .split (',') .splitの説明はあるが、(',')の部分の説明なし .indexOf http://www.scollabo.com/banban/jsindex/sample/sample_113.html これらはネットに説明がありましたが、 Array.prototype.filter.call(変数,実行させるもの) .ownerDocument .textContent.match Array.prototype.forEach.call this.style.display .parentNode.parentNode は見つかりませんでした。 コードの全部を作って頂けるのが一番ですが・・・ 用語辞書的なサイトはありませんか？