- ベストアンサー
プルダウンでテキストエリア表示Javascript
- JavaScriptをはじめて扱う初心者です。このサンプルのテキストエリア（複数行）をプルダウンで内容を変更できるようにしたいと思っています
- プルダウンで項目Ａを選択するとAAAが、項目Ｂを選択するとBBBがテキストエリアに代入されるような機能を付けたいのですが、どのように書いたらよいでしょうか？
- テキストエリアに代入する方法はネットで検索して見つけましたが、上のサンプルスクリプトと繋げ方が分かりませんでした。ご教授よろしくお願いいたします
- 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>
お礼
ご回答ありがとうございます！ サンプルよりもシンプルで良いものが作れそうです 現在までに作っていた計算表はこれで作ることができたのですが… このスクリプトを拡張して、別に材料表のようなものを作ろうと思っています。 具体的には プルダウンで料理を選択 「項目欄」と「単価欄」に材料名と材料数を自動挿入 「個数欄」に○人前と手入力（できれば１箇所だけの入力で済むようにしたい） 小計欄にそれぞれの合計材料数（１人前の材料数×４人前）が自動計算される といった感じです 合計・消費税などを省いた小計のみにしようとデフォルト版の「合計値の計算」「表のフッター」の記述を削除したところ、表が生成されなくなってしまいました。 お手すきの時で構いませんので、再度ご教授頂ければ幸いです＞＜
- 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>
お礼
ありがとうございます＾＾ デフォルト入力版が理想に近かったです＾＾
お礼
ありがとうございます！ これならやりたかった事ができそうです＾＾ いろいろとネットでサンプルなどを見て、なかなか思うようなものが見つからなかったので、とても嬉しいです！ 自分でも加工できるように勉強しながら実用してみたいと思います！ お忙しいところありがとうございました＾＾