プルダウンでテキストエリア表示Javascript
- JavaScriptをはじめて扱う初心者です。このサンプルのテキストエリア(複数行)をプルダウンで内容を変更できるようにしたいと思っています
- プルダウンで項目Aを選択するとAAAが、項目Bを選択するとBBBがテキストエリアに代入されるような機能を付けたいのですが、どのように書いたらよいでしょうか?
- テキストエリアに代入する方法はネットで検索して見つけましたが、上のサンプルスクリプトと繋げ方が分かりませんでした。ご教授よろしくお願いいたします
- ベストアンサー
プルダウンでテキストエリア表示Javascript
JavaScriptをはじめて扱う初心者です。 このサンプルのテキストエリア(複数行)をプルダウンで内容を変更できるようにしたいと思っています http://www3.plala.or.jp/moananja/iroiro/Material/Calculator/Calc3.html プルダウンで項目Aを選択すると AAA AAA AAA 項目Bを選択すると BBB BBB とテキストエリアに代入されるような機能を付けたいのですが、どのように書いたらよいでしょうか? ネットで検索して、テキストエリアに代入する方法は下記で見つけたのですが、上のサンプルスクリプトと繋げ方が分かりませんでした ご教授よろしくお願いいたします http://q.hatena.ne.jp/1190481115
- yui56544
- お礼率85% (6/7)
- JavaScript
- 回答数5
- ありがとう数4
- みんなの回答 (5)
- 専門家の回答
質問者が選んだベストアンサー
合計と消費税を削除してみました。お試しください。 <html> <head> <script language="javascript"> var oMenu={ "menuA":[["sozaiA-1",2],["sozaiA-2",1],["sozaiA-3",2],["sozaiA-4",3],["sozaiA-5",4]], "menuB":[["sozaiB-1",1],["sozaiB-2",2],["sozaiB-3",2],["sozaiB-4",4],["sozaiB-5",2],["sozaiB-6",3],["sozaiB-7",1]], "menuC":[["sozaiC-1",5],["sozaiC-2",2],["sozaiC-3",1]] }; var oItems={"title":"材料名","require":"1人前あたりの材料数","amount":"人数","subtotal":"合計材料数"}; window.onload=function(){ //選択項目の作成 var oSelCategory=getObj("selCategory"); for(strCategory in oMenu) oSelCategory.options[oSelCategory.options.length]=new Option(strCategory,strCategory); //計算表の初期化 makeTable("menuA"); } var getObj=function(strID){return document.getElementById(strID)}; var makeElem=function(strName){return document.createElement(strName)}; //計算表の作成 var makeTable=function(strListName){ var oTBL=getObj("tblCalc"); while(oTBL.hasChildNodes()) oTBL.removeChild(oTBL.lastChild); var oTBODY=makeElem("TBODY"); oTBL.appendChild(oTBODY); //表のヘッダーを追加 var oTR=makeElem("TR"); oTBODY.appendChild(oTR); for(strKey in oItems){ var oTH=makeElem("TH"); oTH.appendChild(document.createTextNode(oItems[strKey])); oTR.appendChild(oTH); } //表のボディを追加 for(var i=0;i<oMenu[strListName].length;i++){ var oTR=makeElem("TR"); oTBODY.appendChild(oTR); //項目名、単価、個数、小計 for(strKey in oItems){ var oTD=makeElem("TD"); oTD.align="center"; oTD.style.backgroundColor="#dddddd"; oTR.appendChild(oTD); if(strKey=="title") oTD.appendChild(document.createTextNode(oMenu[strListName][i][0])); else{ var oINPUT=makeElem("INPUT"); oINPUT.type="text"; oINPUT.id=strKey+"_"+i; oINPUT.style.width="100%"; oINPUT.style.textAlign="right"; if(strKey=="amount") { oINPUT.onkeyup=function(){calcTotal()}; oINPUT.style.imeMode = "disabled"; } else oINPUT.readOnly=true; if(strKey=="require") oINPUT.value=oMenu[strListName][i][1]; oTD.appendChild(oINPUT); } } } } //合計値の計算 var calcTotal = function(){ var strCurListName=getObj("selCategory").value; //小計を計算 for(var i=0;i<oMenu[strCurListName].length;i++){ var oRequire=getObj("require_"+i); var oAmount=getObj("amount_"+i); var oSubTotal=getObj("subtotal_"+i); if( oRequire && oAmount && oSubTotal ){ if(oRequire.value !="" && !isNaN(oRequire.value) && oAmount.value !="" && !isNaN(oAmount.value)) oSubTotal.value=parseFloat(oRequire.value)*parseFloat(oAmount.value); else oSubTotal.value=""; } } } </script> </head> <body> <SELECT ID="selCategory" onchange="makeTable(this.value)"></SELECT><BR/> <TABLE ID="tblCalc" border="1" cellpadding="2" cellspacing="0"></TABLE> </body> </html>
その他の回答 (4)
- nicorus
- ベストアンサー率70% (12/17)
一括入力を忘れていました。 <html> <head> <script language="javascript"> var oMenu={ "menuA":[["sozaiA-1",2],["sozaiA-2",1],["sozaiA-3",2],["sozaiA-4",3],["sozaiA-5",4]], "menuB":[["sozaiB-1",1],["sozaiB-2",2],["sozaiB-3",2],["sozaiB-4",4],["sozaiB-5",2],["sozaiB-6",3],["sozaiB-7",1]], "menuC":[["sozaiC-1",5],["sozaiC-2",2],["sozaiC-3",1]] }; var oItems={"title":"材料名","require":"1人前あたりの材料数","amount":"人前","subtotal":"合計材料数"}; window.onload=function(){ //選択項目の作成 var oSelCategory=getObj("selCategory"); for(strCategory in oMenu) oSelCategory.options[oSelCategory.options.length]=new Option(strCategory,strCategory); //計算表の初期化 makeTable("menuA"); } var getObj=function(strID){return document.getElementById(strID)}; var makeElem=function(strName){return document.createElement(strName)}; //計算表の作成 var makeTable=function(strListName){ var oTBL=getObj("tblCalc"); while(oTBL.hasChildNodes()) oTBL.removeChild(oTBL.lastChild); var oTBODY=makeElem("TBODY"); oTBL.appendChild(oTBODY); //表のヘッダーを追加 var oTR=makeElem("TR"); oTBODY.appendChild(oTR); for(strKey in oItems){ var oTH=makeElem("TH"); if(strKey=="amount"){ var oINPUT=makeElem("INPUT"); oINPUT.type="text"; oINPUT.id="amount"; oINPUT.style.width="30px"; oINPUT.style.textAlign="center"; oINPUT.style.imeMode="disabled"; oINPUT.onkeyup=function(){ for(var i=0;i<oMenu[strListName].length;i++){ var oAmount=document.getElementById("amount_"+i); if(this.value !="" && !isNaN(this.value)) oAmount.value=this.value; calcTotal(); } }; oTH.appendChild(oINPUT); } oTH.appendChild(document.createTextNode(oItems[strKey])); oTR.appendChild(oTH); } //表のボディを追加 for(var i=0;i<oMenu[strListName].length;i++){ var oTR=makeElem("TR"); oTBODY.appendChild(oTR); //項目名、単価、個数、小計 for(strKey in oItems){ var oTD=makeElem("TD"); oTD.align="center"; oTD.style.backgroundColor="#dddddd"; oTR.appendChild(oTD); if(strKey=="title") oTD.appendChild(document.createTextNode(oMenu[strListName][i][0])); else{ var oINPUT=makeElem("INPUT"); oINPUT.type="text"; oINPUT.id=strKey+"_"+i; oINPUT.style.width="100%"; oINPUT.style.textAlign="right"; if(strKey=="amount") { oINPUT.onkeyup=function(){calcTotal()}; oINPUT.style.imeMode="disabled"; } else oINPUT.readOnly=true; if(strKey=="require") oINPUT.value=oMenu[strListName][i][1]; oTD.appendChild(oINPUT); } } } } //合計値の計算 var calcTotal = function(){ var strCurListName=getObj("selCategory").value; //小計を計算 for(var i=0;i<oMenu[strCurListName].length;i++){ var oRequire=getObj("require_"+i); var oAmount=getObj("amount_"+i); var oSubTotal=getObj("subtotal_"+i); if( oRequire && oAmount && oSubTotal ){ if(oRequire.value !="" && !isNaN(oRequire.value) && oAmount.value !="" && !isNaN(oAmount.value)) oSubTotal.value=parseFloat(oRequire.value)*parseFloat(oAmount.value); else oSubTotal.value=""; } } } </script> </head> <body> <SELECT ID="selCategory" onchange="makeTable(this.value)"></SELECT><BR/> <TABLE ID="tblCalc" border="1" cellpadding="2" cellspacing="0"></TABLE> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
ぜんかくくうはくは、すべてはんかくにしてね ふぁいあーふぉっくすとか、くろむとか、あたらしめのものなら、うごくとおもう。 りすとこうぞうは、もっとこまかくしろ!とかは、つっこまないでね <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8" /> <title>朝食</title> <style> table, td { border :1px gray inset; background : #ffe; } th { border :1px gray outset; background : #eef; } ul { margin :1em 0; } td:nth-of-type(2), td:nth-of-type(3) { text-align: right; } form { display:none; } </style> <script> document.write ("<style>#KONDATE{display:none} form{display:block}<" + "/style>"); </script> <body> <h1>朝食の献立</h1> <ul id="KONDATE"> <li> <ul> <li>献立を選んでね </ul> <li> <ul> <li>生卵かけご飯+α <li>ごはん, 1, 杯 <li>生卵, 1, 個 <li>醤油, 10, 滴 <li>リポビタンD, 1, 本 </ul> <li> <ul> <li>卵豆腐 <li>どん兵衛の残り汁, 1, 杯 <li>生卵, 2, 個 <li>ねぎのみじん切り, 少々, <li>よく混ぜて電子レンジで,5,分 </ul> </ul> <form action="#"> <table id="LIST"> <thead> <tr> <th colspan="4"> めにゅ~ <select name="@MENU" onchange="calc (event)"> <option selected>えらんでね </select> <select name="@NINZU" onchange="calc (event)"> <option value="1">1 <option value="2">2 <option value="3">3 </select>人前 <tr><th>材料名<th>材料数<th>合計材料数<th>単位 </thead> <tbody> <tr><td colspan="4">詳細が表示されます </tbody> </table> </form> <script> var D = document; var A = Array.prototype; var csv2Tbody = (function () { function insertRow (fields) { fields.forEach (insertCell, this.insertRow (-1));} function insertCell (field) { this.insertCell (-1).textContent = field; } return function (csv) { var tbody = D.createElement ('tbody'); tbody.insertRow (-1); csv.forEach (insertRow, tbody); tbody.deleteRow (0); return tbody; }; })(); function replaceOptions (select, aryText, aryValue, defValue) { if (2 > arguments.length) return false; var v = D.parentWindow || D.defaultView; var o = select.options; var i, I; var s, sw; o.length = 0; if ('undefined' === typeof aryValue) aryValue = aryText; for (i = 0, I = aryText.length; i < I; i++) { s = String (aryValue[i]); sw = (s === String (defValue)); o[i] = new v.Option (String (aryText[i]), s, sw, sw); } } function calc () { var t = D.querySelector ('#LIST > tbody'); var n = +D.querySelector ('select[name="@MENU"]').value + 1; var m = +D.querySelector ('select[name="@NINZU"]').value; var c = A.map.call ( A.slice.call ( D.querySelectorAll ('#KONDATE > li:nth-of-type(' + n + ') > ul > li'), 1), function (li) { return li.textContent.trim ().split (/[\|\/,]/g);}); c = c.map (function (r) { return [r[0], r[1] || 1, r[1] * this || r[1], r[2] || '-']; }, m); t.parentNode.replaceChild (csv2Tbody(c), t); } //___________ var o = A.reduce.call ( D.querySelectorAll ('#KONDATE > li > ul > li:first-of-type'), function (r, li, i) { return [r[0].concat (li.textContent.trim()), r[1].concat (i)]}, [[],[]]); replaceOptions (D.querySelector ('select[name="@MENU"]'),o[0], o[1]); </script>
お礼
ありがとうございます^^ シンプルで自分でも何とか加工できるスクリプトだったので、アクセス解析で閲覧者の利用ブラウザ状況を見て検討してみようと思います
- nicorus
- ベストアンサー率70% (12/17)
単価デフォルト入力版です。 <html> <head> <script language="javascript"> var oCategory={"listA":[["A1",10],["A2",20],["A3",30],["A4",40],["A5",50]],"listB":[["B1",60],["B2",70],["B3",80],["B4",90],["B5",100],["B6",110],["B7",120]],"listC":[["C1",130],["C2",140],["C3",150]]}; var oHeader=["項目","単価","個数","小計"]; var nTextWidth=100; var nTaxRate=1.05; window.onload=function(){ //選択項目の作成 var oSelCategory=getObj("selCategory"); for(strCategory in oCategory) oSelCategory.options[oSelCategory.options.length]=new Option(strCategory,strCategory); //計算表の初期化 makeTable("listA"); } var getObj=function(strID){return document.getElementById(strID)}; var makeElem=function(strName){return document.createElement(strName)}; //計算表の作成 var makeTable=function(strListName){ var oTBL=getObj("tblCalc"); while(oTBL.hasChildNodes()) oTBL.removeChild(oTBL.lastChild); var oTBODY=makeElem("TBODY"); oTBL.appendChild(oTBODY); //表のヘッダーを追加 var oTR=makeElem("TR"); oTBODY.appendChild(oTR); for(var i=0;i<oHeader.length;i++){ var oTH=makeElem("TH"); oTH.appendChild(document.createTextNode(oHeader[i])); oTR.appendChild(oTH); } //表のボディを追加 var oItems=["title","price","amount","subtotal"]; for(var i=0;i<oCategory[strListName].length;i++){ var oTR=makeElem("TR"); oTBODY.appendChild(oTR); //項目名、単価、個数、小計 for(var j=0;j<oItems.length;j++){ var oTD=makeElem("TD"); oTD.align="center"; oTD.style.backgroundColor="#dddddd"; oTR.appendChild(oTD); if(oItems[j]=="title") oTD.appendChild(document.createTextNode(oCategory[strListName][i][0])); else{ var oINPUT=makeElem("INPUT"); oINPUT.type="text"; oINPUT.id=oItems[j]+"_"+i; oINPUT.style.width=nTextWidth; oINPUT.style.textAlign="right"; if(oItems[j]=="amount") oINPUT.onkeyup=function(){calcTotal()}; else oINPUT.readOnly=true; if(oItems[j]=="price") oINPUT.value=oCategory[strListName][i][1]; oTD.appendChild(oINPUT); } } } //表のフッターを追加 var oTR=makeElem("TR"); oTBODY.appendChild(oTR); //合計タイトル、余白、合計値 for(var j=0;j<oItems.length;j++){ var oTD=makeElem("TD"); oTD.align="center"; oTD.style.backgroundColor="#dddddd"; oTR.appendChild(oTD); if(oItems[j]=="title") oTD.appendChild(document.createTextNode("合計")); else if(oItems[j]!="subtotal") oTD.appendChild(document.createTextNode(" ")); else{ var oINPUT=makeElem("INPUT"); oINPUT.type="text"; oINPUT.id="total"; oINPUT.style.width=nTextWidth; oINPUT.style.textAlign="right"; oINPUT.readOnly=true; oTD.appendChild(oINPUT); } } } //合計値の計算 var calcTotal = function(){ var strCurListName=getObj("selCategory").value; var blnAddTaxRate=getObj("chkTaxRate").checked; //小計を計算 for(var i=0;i<oCategory[strCurListName].length;i++){ var oPrice=getObj("price_"+i); var oAmount=getObj("amount_"+i); var oSubTotal=getObj("subtotal_"+i); if( oPrice && oAmount && oSubTotal ){ if(oPrice.value !="" && !isNaN(oPrice.value) && oAmount.value !="" && !isNaN(oAmount.value)){ var nSubTatal=parseFloat(oPrice.value)*parseFloat(oAmount.value)*(blnAddTaxRate?nTaxRate:1); var nDecimalMode=1;//小数点以下の扱い(1:繰り下げ、2:繰り上げ、3:四捨五入) oSubTotal.value=(nDecimalMode==1?Math.floor(nSubTatal):(nDecimalMode==2?Math.ceil(nSubTatal):Math.round(nSubTatal))); } else oSubTotal.value=""; } } //合計を計算 var nTotalAmount=0; var oTatal=getObj("total"); for(var i=0;i<oCategory[strCurListName].length;i++){ var oSubTotal=getObj("subtotal_"+i); if(oSubTotal.value !="") nTotalAmount+=parseFloat(oSubTotal.value); } oTatal.value=(nTotalAmount==0?"":nTotalAmount); } </script> </head> <body> <SELECT ID="selCategory" onchange="makeTable(this.value)"></SELECT><BR/> <TABLE ID="tblCalc" border="1" cellpadding="2" cellspacing="0"></TABLE> <INPUT TYPE="checkbox" ID="chkTaxRate" name="chkTaxRate" onclick="calcTotal()"/><LABEL for="chkTaxRate">消費税</LABEL> </body> </html>
お礼
ご回答ありがとうございます! サンプルよりもシンプルで良いものが作れそうです 現在までに作っていた計算表はこれで作ることができたのですが… このスクリプトを拡張して、別に材料表のようなものを作ろうと思っています。 具体的には プルダウンで料理を選択 「項目欄」と「単価欄」に材料名と材料数を自動挿入 「個数欄」に○人前と手入力(できれば1箇所だけの入力で済むようにしたい) 小計欄にそれぞれの合計材料数(1人前の材料数×4人前)が自動計算される といった感じです 合計・消費税などを省いた小計のみにしようとデフォルト版の「合計値の計算」「表のフッター」の記述を削除したところ、表が生成されなくなってしまいました。 お手すきの時で構いませんので、再度ご教授頂ければ幸いです><
- nicorus
- ベストアンサー率70% (12/17)
テキストエリアにこだわらないのであれば・・・ <html> <head> <script language="javascript"> var oCategory={"listA":["A1","A2","A3","A4","A5"],"listB":["B1","B2","B3","B4","B5","B6","B7"],"listC":["C1","C2","C3"]}; var oHeader=["項目","単価","個数","小計"]; var nTextWidth=100; var nTaxRate=1.05; window.onload=function(){ //選択項目の作成 var oSelCategory=getObj("selCategory"); for(strCategory in oCategory) oSelCategory.options[oSelCategory.options.length]=new Option(strCategory,strCategory); //計算表の初期化 makeTable("listA"); } var getObj=function(strID){return document.getElementById(strID)}; var makeElem=function(strName){return document.createElement(strName)}; //計算表の作成 var makeTable=function(strListName){ var oTBL=getObj("tblCalc"); while(oTBL.hasChildNodes()) oTBL.removeChild(oTBL.lastChild); var oTBODY=makeElem("TBODY"); oTBL.appendChild(oTBODY); //表のヘッダーを追加 var oTR=makeElem("TR"); oTBODY.appendChild(oTR); for(var i=0;i<oHeader.length;i++){ var oTH=makeElem("TH"); oTH.appendChild(document.createTextNode(oHeader[i])); oTR.appendChild(oTH); } //表のボディを追加 var oItems=["title","price","amount","subtotal"]; for(var i=0;i<oCategory[strListName].length;i++){ var oTR=makeElem("TR"); oTBODY.appendChild(oTR); //項目名、単価、個数、小計 for(var j=0;j<oItems.length;j++){ var oTD=makeElem("TD"); oTD.align="center"; oTD.style.backgroundColor="#dddddd"; oTR.appendChild(oTD); if(oItems[j]=="title") oTD.appendChild(document.createTextNode(oCategory[strListName][i])); else{ var oINPUT=makeElem("INPUT"); oINPUT.type="text"; oINPUT.id=oItems[j]+"_"+i; oINPUT.style.width=nTextWidth; oINPUT.style.textAlign="right"; if(oItems[j]=="subtotal") oINPUT.readOnly=true; else oINPUT.onkeyup=function(){calcTotal()}; oTD.appendChild(oINPUT); } } } //表のフッターを追加 var oTR=makeElem("TR"); oTBODY.appendChild(oTR); //合計タイトル、余白、合計値 for(var j=0;j<oItems.length;j++){ var oTD=makeElem("TD"); oTD.align="center"; oTD.style.backgroundColor="#dddddd"; oTR.appendChild(oTD); if(oItems[j]=="title") oTD.appendChild(document.createTextNode("合計")); else if(oItems[j]!="subtotal") oTD.appendChild(document.createTextNode(" ")); else{ var oINPUT=makeElem("INPUT"); oINPUT.type="text"; oINPUT.id="total"; oINPUT.style.width=nTextWidth; oINPUT.style.textAlign="right"; oINPUT.readOnly=true; oTD.appendChild(oINPUT); } } } //合計値の計算 var calcTotal = function(){ var strCurListName=getObj("selCategory").value; var blnAddTaxRate=getObj("chkTaxRate").checked; //小計を計算 for(var i=0;i<oCategory[strCurListName].length;i++){ var oPrice=getObj("price_"+i); var oAmount=getObj("amount_"+i); var oSubTotal=getObj("subtotal_"+i); if( oPrice && oAmount && oSubTotal ){ if(oPrice.value !="" && !isNaN(oPrice.value) && oAmount.value !="" && !isNaN(oAmount.value)){ var nSubTatal=parseFloat(oPrice.value)*parseFloat(oAmount.value)*(blnAddTaxRate?nTaxRate:1); var nDecimalMode=1;//小数点以下の扱い(1:繰り下げ、2:繰り上げ、3:四捨五入) oSubTotal.value=(nDecimalMode==1?Math.floor(nSubTatal):(nDecimalMode==2?Math.ceil(nSubTatal):Math.round(nSubTatal))); } else oSubTotal.value=""; } } //合計を計算 var nTotalAmount=0; var oTatal=getObj("total"); for(var i=0;i<oCategory[strCurListName].length;i++){ var oSubTotal=getObj("subtotal_"+i); if(oSubTotal.value !="") nTotalAmount+=parseFloat(oSubTotal.value); } oTatal.value=(nTotalAmount==0?"":nTotalAmount); } </script> </head> <body> <SELECT ID="selCategory" onchange="makeTable(this.value)"></SELECT><BR/> <TABLE ID="tblCalc" border="1" cellpadding="2" cellspacing="0"></TABLE> <INPUT TYPE="checkbox" ID="chkTaxRate" name="chkTaxRate" onclick="calcTotal()"/><LABEL for="chkTaxRate">消費税</LABEL> </body> </html>
お礼
ありがとうございます^^ デフォルト入力版が理想に近かったです^^
関連するQ&A
- プルダウンリストとテキストエリアの連動
どう調べてもわからないので教えてください。 HTML上で動作するツールを作成しています。 最終的に、あるテンプレートをテキストエリアに表示させたいと考えています。 そのために、項目をいくつかプルダウンで選択し進んでいくというものです。 プルダウンリストは、選択したリストにより連動し、選択肢が変わるように したいのです。 項目別にプルダウンは5つ、5つ目はない場合もあります。 【手順】 (1)プルダウン(1)選択 ↓ (2)プルダウン(2)選択 ↓ (3)プルダウン(3)選択 ↓ (4)プルダウン(4)選択 ↓ (5)プルダウン(5)選択 ←選択肢がない場合あり ↓ テキストエリアに該当の文言が表示 ちょっと複雑なのですが、よろしくお願いいたします。
- 締切済み
- HTML
- プルダウンとテキストの連動
お世話になります。プルダウン1を選択すると、プルダウン2の内容が切り替わり、さらにプルダウン2を選択すると、横のテキストフィールド内にテキストが入る(プルダウン2で選択した項目の説明)というようにしたいのです。プルダウン1をえらぶと2の項目がかわる、まではできたのですが、次のテキスト変更がわかりません。プルダウン3として、そこにテキストを表示させようかと思ったのですが、やはりテキストフィールドにしてほしいといわれてしまいました。。。わかりにくい説明ですみませんが、参考になるサイトなどご存じでしたら教えてください。どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- javascriptのプルダウンで項目外の表示可否
javascriptのプルダウンで一覧から項目を選択したら、プルダウンに表示する文字を一覧とは違うものに出来るかどうか。 説明文が分かりにくかったら申し訳ございません。 図と文字で説明すると以下のような感じです。 ============================ 前提:リストに表示させる項目は「ああああ」「いいいい」「うううう」 1.まず、プルダウンを開きます。 [ ▽] ――――― |ああああ| |いいいい|←「いいいい」を選択する |ううううう | ――――― 2.項目を選択する。 [2番目▽]←「いいいい」を選択したが、「2番目」とプルダウンに表示させる。 3.またプルダウンリストを開く [2番目▽] ――――― |ああああ| |いいいい| |ううううう | ――――― 「2番目」と表示されたまま最初にあった全ての項目が表示される。 プルダウンは複数行あるグリッド(javascriptでもこの部品名か分かりませんが、エクセルみたいに動作する部品です)でA列に同じ種類が置かれます。 ↓こんな感じで A列 | B列 | C列 |←ヘッダ部 ―――――――――――― [ ▽]| | | ←ボディ ―――――――――――― [ ▽]| | | ―――――――――――― [ ▽]| | | ―――――――――――― ============================ 上記のような動作はjavascriptでは可能でしょうか? javascriptは門外漢で、プログラマーにjavascriptでは出来ない!と言われてしまっているのですが、VB的には出来るのだからjavascriptでも出来るのではないかと思っています。 ただ、動作させる場所がweb上なので自分が思っているものとは制限が違うのではないかもと思い、意見を言えない状態です。 ご存知のいらっしゃいましたら ・可能か否か 出来れば ・どのような作り方であれば実現できそうか (プルダウンを開いた時と閉じた時で処理を走らせればいいとか簡単でいいので) などを教えていただければ幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 【JavaScript】プルダウンで数字を選択後、即時計算したいですが
【JavaScript】プルダウンで数字を選択後、即時計算したいですが 方法がわかりません。 http://bunjin.com/java/calc.html 以上のサンプルページでは、チェックボックスを押した直後、 下部のテキストボックスに金額が表示されるように設定されていますが、 チェックボックスの横などにプルダウンで数字を表示させて、 その数字の積を合計金額に表示させたいのです。 例) 「ラーメン(500円)」のチェックボックスにチェック(合計金額には「500 円」と表示) ↓ その「ラーメン(500円)」の横にプルダウンボックスを選択(値は1,2,3,・・・) ↓ 選択した値により、合計金額を変化させたい(プルダウンで1を選べば500円、2を選べば1000円、・・・) どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptを使って
javascriptを使って 2つのプルダウンメーニューでキーワードを選択し そのキーワードを使って楽天の検索エンジンでand検索(絞り込み検索)する方法を教えてください。 フローのイメージです。 1、プルダウンメニュー1から、60mm を選択 2、プルダウンメニュー2から、200mm を選択 3、商品を探すボタンを押す 4、楽天に出店している AAAショップ and BBB商品 and 60mm and 200mm での検索結果が現れる。 (4つの絞り込み検索だが、プルダウンで選ぶのは後半のん2つの項目) 初心者で、javascriptのことはよくわからないのですが よろしくお願いいたします。
- ベストアンサー
- JavaScript
- プルダウンのoptionの表示・非表示はできますか?
JavaScriptを使ってプルダウン操作をしております。 一つ目のプルダウンで選択したあと2つ目のプルダウンのoptionの部分だけ表示・非表示をしたいのです。そんなことはできるのでしょうか? 下のソースで説明しますが、一つ目のリストで「あいうえお」を選択した時点で2つ目の選択リストの「ひらがな1」と「ひらがな2」だけを選択できるようにしたいのです。「カタカナ1」「カタカナ2」は非表示もしくは選択不可にできればいいのですが。 一つ目のプルダウンリスト <select name="formtype" onchange="form_indicate();"> <option value="AAA">あいうえお <option value="BBB">アイウエオ </select> 二つ目のプルダウンリスト <select name="formtype2"> <option value="aaa">ひらがな1 <option value="bbb">ひらがな2 <option value="ccc">カタカナ1 <option value="ddd">カタカナ2 </select>
- 締切済み
- JavaScript
- テキストエリアにあわせた文字サイズ変更
Javascript自体うまく動かすことができず、 サンプルを探しても見つからず、困っております。 やりたいことは、 Aのテキストエリアに入力した文字を「OK」ボタンクリックと同時に Bという別のテキストエリア(エリアの枠は固定)にリサイズ表示させたいと思います。 テキストエリア自体を文字数により大きくするサンプルはありましたが その逆のテキストエリアのサイズに文字をあわせるものが見つかりません。 申し訳ありませんが、おしえていただけますでしょうか。
- 締切済み
- JavaScript
- [Javascript]プルダウンにてselectedIndex以外の方法で・・・
こんばんわ。 プルダウンでselectedIndexでデフォルトの選択項目を変更することは簡単ですが、 <OPTION value='aaa'>aaa</OPTION> value値でおなじことは出来ませんか? selectedValue とかなんか・・・。 あればいいんだけどなぁ~。 お願いします。
- ベストアンサー
- JavaScript
- テキストフィールドでのプルダウンメニュー
テキストフィールド内で↓キーを押下すると、プルダウンメニューが表示される HPを良くみます。恐らく、JavaScriptにより実現していると思われますが、 サンプルソースあるいは参考URLを教えて下さい。これはIEのみ使用可能で ネスケは不可なのでしょうか?併せてお願いします
- 締切済み
- JavaScript
- IllustratorCS(Win)のJavascriptで特定のテキストエリア選択について
IllustratorCSで「特定のテキストエリアを選択して、それを削除する」というスクリプトをJavascriptで作りたいと思っています。いろいろと調べたのですが、情報が少なく、かつ初心者なので困っています。 おわかりの方、いらっしゃいましたらお願いいたします。
- ベストアンサー
- グラフィックソフト
お礼
ありがとうございます! これならやりたかった事ができそうです^^ いろいろとネットでサンプルなどを見て、なかなか思うようなものが見つからなかったので、とても嬉しいです! 自分でも加工できるように勉強しながら実用してみたいと思います! お忙しいところありがとうございました^^