プルダウンでテキストエリア表示Javascript

前へ 次へ
このQ&Aのポイント
  • JavaScriptをはじめて扱う初心者です。このサンプルのテキストエリア（複数行）をプルダウンで内容を変更できるようにしたいと思っています
  • プルダウンで項目Ａを選択するとAAAが、項目Ｂを選択するとBBBがテキストエリアに代入されるような機能を付けたいのですが、どのように書いたらよいでしょうか？
  • テキストエリアに代入する方法はネットで検索して見つけましたが、上のサンプルスクリプトと繋げ方が分かりませんでした。ご教授よろしくお願いいたします
回答を見る
  • ベストアンサー

プルダウンでテキストエリア表示Javascript

JavaScriptをはじめて扱う初心者です。 このサンプルのテキストエリア（複数行）をプルダウンで内容を変更できるようにしたいと思っています http://www3.plala.or.jp/moananja/iroiro/Material/Calculator/Calc3.html プルダウンで項目Ａを選択すると 　AAA 　AAA 　AAA 項目Ｂを選択すると 　BBB 　BBB とテキストエリアに代入されるような機能を付けたいのですが、どのように書いたらよいでしょうか？ ネットで検索して、テキストエリアに代入する方法は下記で見つけたのですが、上のサンプルスクリプトと繋げ方が分かりませんでした ご教授よろしくお願いいたします http://q.hatena.ne.jp/1190481115

質問者が選んだベストアンサー

  • ベストアンサー
  • nicorus
  • ベストアンサー率70% (12/17)
回答No.4

合計と消費税を削除してみました。お試しください。 <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>

yui56544
質問者

お礼

ありがとうございます！ これならやりたかった事ができそうです＾＾ いろいろとネットでサンプルなどを見て、なかなか思うようなものが見つからなかったので、とても嬉しいです！ 自分でも加工できるように勉強しながら実用してみたいと思います！ お忙しいところありがとうございました＾＾

その他の回答 (4)

  • nicorus
  • ベストアンサー率70% (12/17)
回答No.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"); 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>

回答No.3

ぜんかくくうはくは、すべてはんかくにしてね ふぁいあーふぉっくすとか、くろむとか、あたらしめのものなら、うごくとおもう。 りすとこうぞうは、もっとこまかくしろ！とかは、つっこまないでね <!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>

yui56544
質問者

お礼

ありがとうございます＾＾ シンプルで自分でも何とか加工できるスクリプトだったので、アクセス解析で閲覧者の利用ブラウザ状況を見て検討してみようと思います

  • nicorus
  • ベストアンサー率70% (12/17)
回答No.2

単価デフォルト入力版です。 <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>

yui56544
質問者

お礼

ご回答ありがとうございます！ サンプルよりもシンプルで良いものが作れそうです 現在までに作っていた計算表はこれで作ることができたのですが… このスクリプトを拡張して、別に材料表のようなものを作ろうと思っています。 具体的には 　プルダウンで料理を選択 　「項目欄」と「単価欄」に材料名と材料数を自動挿入 　「個数欄」に○人前と手入力（できれば１箇所だけの入力で済むようにしたい） 　小計欄にそれぞれの合計材料数（１人前の材料数×４人前）が自動計算される といった感じです 合計・消費税などを省いた小計のみにしようとデフォルト版の「合計値の計算」「表のフッター」の記述を削除したところ、表が生成されなくなってしまいました。 お手すきの時で構いませんので、再度ご教授頂ければ幸いです＞＜

  • nicorus
  • ベストアンサー率70% (12/17)
回答No.1

テキストエリアにこだわらないのであれば・・・ <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>

yui56544
質問者

お礼

ありがとうございます＾＾ デフォルト入力版が理想に近かったです＾＾

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

関連するQ&A

  • プルダウンリストとテキストエリアの連動

    どう調べてもわからないので教えてください。 HTML上で動作するツールを作成しています。 最終的に、あるテンプレートをテキストエリアに表示させたいと考えています。 そのために、項目をいくつかプルダウンで選択し進んでいくというものです。 プルダウンリストは、選択したリストにより連動し、選択肢が変わるように したいのです。 項目別にプルダウンは5つ、5つ目はない場合もあります。 【手順】 (1)プルダウン（１）選択 ↓ (2)プルダウン（2）選択 ↓ (3)プルダウン（3）選択 ↓ (4)プルダウン（4）選択 ↓ (5)プルダウン（5）選択　←選択肢がない場合あり ↓ テキストエリアに該当の文言が表示 ちょっと複雑なのですが、よろしくお願いいたします。

  • プルダウンとテキストの連動

    お世話になります。プルダウン１を選択すると、プルダウン２の内容が切り替わり、さらにプルダウン２を選択すると、横のテキストフィールド内にテキストが入る（プルダウン２で選択した項目の説明）というようにしたいのです。プルダウン１をえらぶと２の項目がかわる、まではできたのですが、次のテキスト変更がわかりません。プルダウン３として、そこにテキストを表示させようかと思ったのですが、やはりテキストフィールドにしてほしいといわれてしまいました。。。わかりにくい説明ですみませんが、参考になるサイトなどご存じでしたら教えてください。どうかよろしくお願い致します。

  • javascriptのプルダウンで項目外の表示可否

    javascriptのプルダウンで一覧から項目を選択したら、プルダウンに表示する文字を一覧とは違うものに出来るかどうか。 説明文が分かりにくかったら申し訳ございません。 図と文字で説明すると以下のような感じです。 ============================ 前提：リストに表示させる項目は「ああああ」「いいいい」「うううう」 １．まず、プルダウンを開きます。 　［　　　　▽］ 　――――― ｜ああああ｜ ｜いいいい｜←「いいいい」を選択する ｜ううううう ｜ 　――――― ２．項目を選択する。 　［２番目▽］←「いいいい」を選択したが、「２番目」とプルダウンに表示させる。 ３．またプルダウンリストを開く 　［２番目▽］ 　――――― ｜ああああ｜ ｜いいいい｜ ｜ううううう ｜ 　――――― 「２番目」と表示されたまま最初にあった全ての項目が表示される。 プルダウンは複数行あるグリッド（javascriptでもこの部品名か分かりませんが、エクセルみたいに動作する部品です）でＡ列に同じ種類が置かれます。 ↓こんな感じで 　Ａ列　｜　Ｂ列　｜　Ｃ列　｜←ヘッダ部 ―――――――――――― [　　▽]｜　　　　　｜　　　　｜　←ボディ ―――――――――――― [　　▽]｜　　　　　｜　　　　｜ ―――――――――――― [　　▽]｜　　　　　｜　　　　｜ ―――――――――――― ============================ 上記のような動作はjavascriptでは可能でしょうか？ javascriptは門外漢で、プログラマーにjavascriptでは出来ない！と言われてしまっているのですが、VB的には出来るのだからjavascriptでも出来るのではないかと思っています。 ただ、動作させる場所がweb上なので自分が思っているものとは制限が違うのではないかもと思い、意見を言えない状態です。 ご存知のいらっしゃいましたら 　・可能か否か 出来れば 　・どのような作り方であれば実現できそうか （プルダウンを開いた時と閉じた時で処理を走らせればいいとか簡単でいいので） などを教えていただければ幸いです。 よろしくお願いいたします。

  • 【JavaScript】プルダウンで数字を選択後、即時計算したいですが

    【JavaScript】プルダウンで数字を選択後、即時計算したいですが 方法がわかりません。 http://bunjin.com/java/calc.html 以上のサンプルページでは、チェックボックスを押した直後、 下部のテキストボックスに金額が表示されるように設定されていますが、 チェックボックスの横などにプルダウンで数字を表示させて、 その数字の積を合計金額に表示させたいのです。 例） 「ラーメン（５００円）」のチェックボックスにチェック（合計金額には「500　円」と表示） ↓ その「ラーメン（５００円）」の横にプルダウンボックスを選択(値は1,2,3,・・・) ↓ 選択した値により、合計金額を変化させたい(プルダウンで1を選べば500円、2を選べば1000円、・・・) どうかよろしくお願いします。

  • javascriptを使って

    javascriptを使って ２つのプルダウンメーニューでキーワードを選択し そのキーワードを使って楽天の検索エンジンでand検索（絞り込み検索）する方法を教えてください。 フローのイメージです。 １、プルダウンメニュー１から、60mm　を選択 ２、プルダウンメニュー２から、200mm　を選択 ３、商品を探すボタンを押す ４、楽天に出店している AAAショップ and BBB商品 and 60mm and 200mm　での検索結果が現れる。 （４つの絞り込み検索だが、プルダウンで選ぶのは後半のん２つの項目） 初心者で、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>

  • テキストエリアにあわせた文字サイズ変更

    Ｊａｖａｓｃｒｉｐｔ自体うまく動かすことができず、 サンプルを探しても見つからず、困っております。 やりたいことは、 Aのテキストエリアに入力した文字を「OK」ボタンクリックと同時に Bという別のテキストエリア（エリアの枠は固定）にリサイズ表示させたいと思います。 テキストエリア自体を文字数により大きくするサンプルはありましたが その逆のテキストエリアのサイズに文字をあわせるものが見つかりません。 申し訳ありませんが、おしえていただけますでしょうか。

  • [Javascript]プルダウンにてselectedIndex以外の方法で・・・

    こんばんわ。 プルダウンでselectedIndexでデフォルトの選択項目を変更することは簡単ですが、 <OPTION value='aaa'>aaa</OPTION> value値でおなじことは出来ませんか？ selectedValue とかなんか・・・。 あればいいんだけどなぁ～。 お願いします。

  • テキストフィールドでのプルダウンメニュー

    テキストフィールド内で↓キーを押下すると、プルダウンメニューが表示される HPを良くみます。恐らく、JavaScriptにより実現していると思われますが、 サンプルソースあるいは参考URLを教えて下さい。これはIEのみ使用可能で ネスケは不可なのでしょうか？併せてお願いします

  • IllustratorCS(Win)のJavascriptで特定のテキストエリア選択について

    IllustratorCSで「特定のテキストエリアを選択して、それを削除する」というスクリプトをJavascriptで作りたいと思っています。いろいろと調べたのですが、情報が少なく、かつ初心者なので困っています。 おわかりの方、いらっしゃいましたらお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する