javascript - 如何使用Javascript显示选择选项的值

Question

我在 HTML 标签表中使用选择选项，并且可以使用其他一些 javascript 函数添加额外的相同行。我的问题是显示所选值的值。

我的代码是:

JavaScript

    function addRowToTable()
{
  var tbl = document.getElementById('tblsample');
  var name=document.getElementById('accounthead1');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow-1;
  var row = tbl.insertRow(lastRow);
  // left cell
  // left cell
   // select cell

  var cellRight = row.insertCell(0);
  var e0 = document.createElement('input');
  e0.type = 'text';
  e0.name = 'nol';
  e0.id = 'nol';
  e0.size = 3;
  e0.value=iteration;
  e0.readOnly = true;
  cellRight.appendChild(e0);

  var cellRight = row.insertCell(1);
  var e2 = document.createElement('input');
  e2.type = 'text';
  e2.name = 'accounthead' + iteration;;
  e2.id = 'accounthead' + iteration;
  e2.size = 25;
  e2.onkeyup = keyPressTest;
//  e1.value=iteration;
  cellRight.appendChild(e2);

  var cellRight = row.insertCell(2);
  var e11 = document.createElement('input');
  e11.type = 'hidden';
  e11.name = 'idd' + iteration;;
  e11.id = 'idd' + iteration;
  e11.size = 45;
//  e1.value=iteration;
  cellRight.appendChild(e11);

   var cellRight = row.insertCell(3);
  var e3 = document.createElement('input');
  e3.type = 'text';
  e3.name = 'amount' + iteration;
  e3.id = 'amount' + iteration;
  e3.size = 15;
  e3.onblur = calc;
  e3.value=0;
  cellRight.appendChild(e3);


   var cellRight = row.insertCell(4);
  var sel = document.createElement('select');
  sel.name = 'mode' + iteration;
  sel.id = 'mode' + iteration;
     <?php
     echo $Y;
   ?>
  cellRight.appendChild(sel);





 var cellRight = row.insertCell(5); 
 var e4 = document.createElement('textarea');
 e4.name = 'desc' + iteration;;
 e4.id = 'desc' + iteration;
 cellRight.appendChild(e4);

 }
function removeRow()
{
var tbl=document.getElementById("tblsample");
var lastRow=tbl.rows.length-1;
 if (lastRow > 2) tbl.deleteRow(lastRow);
}

我只想要此部分的解决方案..我如何显示所选选项的值

function calc(calculate)
{
var tbl=document.getElementById('tblsample');
var totalamountA=document.getElementById('totalamount');
var billfinalamt=document.getElementById('billfinalamt');
var payableamt=document.getElementById('payableamt');
var billamount=document.getElementById('billamount');

totalamount=0;
lastrowA=tbl.rows.length-1;
lastrow=lastrowA-1;
for (k=1;k<=lastrow;k++)
{
var amountA=document.getElementById('amount' + k);
amountA.readOnly='';
amount=parseFloat(amountA.value);

var modeA=document.getElementById('mode' + k);
var Mvalue = modeA.options[modeA.selectedIndex].value;
var text = modeA.options[modeA.selectedIndex].text;


totalamount=totalamount+amount;
totalamountA.value=totalamount; 
billfinalamt.value=totalamount; 
remining();
window.alert(Mvalue);   
}

if ((billamount.value==totalamount && payableamt.value>=0))
{
var table=document.getElementById('table');
var calculate=document.getElementById('calculate');
var count=document.getElementById('count');
table.style.display="block";
calculate.style.display="none";
count.value=lastrow;
}

else
{
if (calculate=='calculat')
{
alert('Your Total Amount Has Been Not Match in - '+billamount.value);   
}
var table=document.getElementById('table');
var calculate=document.getElementById('calculate');
table.style.display="none";
calculate.style.display="block";
}
}
  function remining(checking)
{
var billamount=document.getElementById('billamount');
var totalamount=document.getElementById('totalamount');
var totaldetuctamt=document.getElementById('totalamt');
var totalholdamt=document.getElementById('totalholdamt');
var totaladvanceamt=document.getElementById('totaladvanceamt');
var holdamt=document.getElementById('holdamt');
var advanceamt=document.getElementById('advanceamt');
var payableamt=document.getElementById('payableamt');
var mode=document.getElementById('mode');

totalholdamt.value=holdamt.value;
totaladvanceamt.value=advanceamt.value;
reminingamount=parseFloat(billamount.value)-(parseFloat(totaldetuctamt.value)+parseFloat(holdamt.value)+parseFloat(advanceamt.value));  
//alert(reminingamount);
if (reminingamount>=0)
{
payableamt.value=reminingamount;

}
else
{
alert("...Your Project Amount Is Low.so Please Check...");  
payableamt.value=reminingamount;
}

}

HTML

<table id="tblsample" width="100" height="100">
 <tr><th>S.No</th><th>Account Head</th><td></td><th>Amount</th><th>Mode</th><th>Description</th></tr><tr></tr>
 <td><input  type="text" name="no1" id="no1" size="3" value="1" readonly=""/></td>
  <td>
 <input type="text" name="accounthead1" id="accounthead1" size="25"  oncontextmenu="dontcopy();" onkeyup="keyPressTest(event, this);" autocomplete="off"/></td><td> 
 <input type="hidden" name="idd1" id="idd1"/></td>
 <td><input type="text" name="amount1" id="amount1" size="15" value="0"/></td>
 <td><select name="mode" id="mode" onchange="calc();"><option value="00">Please Select</option><option value="C">CREDIT</option><option value="D">DEBIT</option></select></td>
 <td><textarea name="desc1"></textarea></td></tr>
 </table>

Answer 1

我发现这些错误；

// you reference a select with the id 'mode' + k but there is no select in 
// your html with that id
var modeA=document.getElementById('mode' + k);

// you don't pass any argument to the function in your html's onchange event (onchange="calc();")
// so it is unclear if there should be one and how you suppose to use it
function calc(calculate) {...

// the argument variable is reused in a strange way which likely will cause errors  
var calculate=document.getElementById('calculate');

// the argument variable is reused in a strange way which likely will cause errors  
if (calculate=='calculat')

// these 2 elements is wrong referenced, either with wrong id or missing in html
var table=document.getElementById('table');
var calculate=document.getElementById('calculate');

将您的代码添加到 jsfiddle: http://jsfiddle.net/EDn9D/

在那里您可以看到错误和尝试/错误，直到它起作用