使用下拉菜單從表中選擇一個值

Question

我正在嘗試基於下拉菜單中的值從表中選擇一個值。 到目前為止，我有：

<table class="table table-striped table-hover table-bordered table-responsive" id="rates">
    <thead>
        <tr style="background-color: "><th>State</th><th>Fee1</th><th>Fee2</th><th>Fee3</th><th>Fee4</th><th>Fee5</th><th>Fee6</th></tr>
    </thead>
    <tbody id="rates">
        <tr><td id="AR">Arkansas</td><td id="AR_F1">.04</td><td id="AR_F2">0.00</td><td id="AR_F3">0.00</td><td id="AR_F4">0.00</td><td id="AR_F5">0.00</td><td id="AR_F6">0.00</td></tr>
        <tr><td id="AZ">Arizona</td><td id="AZ_F1">.03</td><td id="AZ_F2">0.002</td><td id="AZ_F3">0.00</td><td id="AZ_F4">0.00</td><td id="AZ_F5">0.00</td><td id="F6_O">0.00</td></tr>
        <tr><td id="CA">California</td><td id="CA_F1">.03</td><td  id="CA_F2">0.002</td><td id="CA_F3">0.00</td><td id="CA_F4">0.00</td><td id="CA_F5">0.00</td><td id="CA_F6">0.00</td></tr>
    </tbody>
</table><br/>

<select id="stateSel">
      <option value="Arkansas">Arkansas</option>
      <option value="Arizona">Arizona</option>
      <option value="California">California</option>
    </select><br/>

<table class="table table-bordered">
<tbody>
<tr><td><h4>Tax Calculator</h4></td></tr>
<tr><th>Fee1:</th><td><input type="text"/></td></tr>
<tr><th>Fee2:</th><td><input type="text" /></td></tr>
<tr><th>Fee3:</th><td><input type="text"/></td></tr>
<tr><th>Fee4:</th><td><input type="text"/></td></tr>
<tr><th>Total:</th><td><input type="text" id="totalAmount"/></td></tr>
</tbody>
</table>
<br/>
<button onclick="myFunction()">Calculate</button>

到目前為止，我的腳本是這樣的：

<script> 


function myFunction() {
    var x = document.getElementById("stateSel").selectedIndex;
    var y = document.getElementById("stateSel").options;
    var rowIndex = y[x];
    var fee1 = document.getElementById("rates").rows[rowIndex.index + 1].cells[2].value;

    alert(fee1.index);
}
 </script>

我正在使用警報來查看是否可以從帶有費率的表格中選擇一個值。 我不斷得到一個不確定的值。 以后，我想使用該值（來自適當的行和列）以及其他類似選擇的值來構建費用計算器。 請幫助我從表的行和列中獲取值。

Answer 1

將選擇更改為此：

<select id="stateSel">
  <option value="AR">Arkansas</option>
  <option value="AZ">Arizona</option>
  <option value="CA">California</option>
</select><br/>

使用此功能將獲取內容

/**
 ** Define your own function and documentation
 **/
function myFunction() {
    var
        // Get the selected country. It should be the value of your option
        state = document.querySelector('#stateSel').value,

        // Get the value (text) of any selected _FX from the table
        fee1 = document.querySelector('#' + state + '_F1').textContent;

    alert(fee1);
}

Answer 2

您需要使用“ innerHTML”來提取正確的數據。

https://jsfiddle.net/shemdani/t5fmzbw4/7/

<table class="table table-striped table-hover table-bordered table-responsive" id="rates">
    <thead>
        <tr style="background-color: "><th>State</th><th>Fee1</th><th>Fee2</th><th>Fee3</th><th>Fee4</th><th>Fee5</th><th>Fee6</th></tr>
    </thead>
    <tbody id="ratesBody">
        <tr><td id="AR">Arkansas</td><td id="AR_F1">.04</td><td id="AR_F2">0.00</td><td id="AR_F3">0.00</td><td id="AR_F4">0.00</td><td id="AR_F5">0.00</td><td id="AR_F6">0.00</td></tr>
        <tr><td id="AZ">Arizona</td><td id="AZ_F1">.03</td><td id="AZ_F2">0.002</td><td id="AZ_F3">0.00</td><td id="AZ_F4">0.00</td><td id="AZ_F5">0.00</td><td id="F6_O">0.00</td></tr>
        <tr><td id="CA">California</td><td id="CA_F1">.03</td><td  id="CA_F2">0.002</td><td id="CA_F3">0.00</td><td id="CA_F4">0.00</td><td id="CA_F5">0.00</td><td id="CA_F6">0.00</td></tr>
    </tbody>
</table><br/>

<select id="stateSel">
      <option value="Arkansas">Arkansas</option>
      <option value="Arizona">Arizona</option>
      <option value="California">California</option>
    </select><br/>

<table class="table table-bordered">
<tbody>
<tr><td><h4>Tax Calculator</h4></td></tr>
<tr><th>Fee1:</th><td><input type="text"/></td></tr>
<tr><th>Fee2:</th><td><input type="text" /></td></tr>
<tr><th>Fee3:</th><td><input type="text"/></td></tr>
<tr><th>Fee4:</th><td><input type="text"/></td></tr>
<tr><th>Total:</th><td><input type="text" id="totalAmount"/></td></tr>
</tbody>
</table>
<br/>
<button onClick="calculate()">Calculate</button>

<script>
function calculate(){
   var x = document.getElementById("stateSel").selectedIndex;
    var y = document.getElementById("stateSel").options[x].value;
    alert ('selected state: ' + y);
    var rowIndex = x;
    var fee1 = document.getElementById("rates").rows[rowIndex + 1].cells[1].innerHTML;
    alert(fee1);
}

</script>

Answer 3

除了表單字段，您不要在其他任何value上使用value 。 對於所有其他元素，請使用textContent或innerHTML 。

 function myFunction() { var x = document.getElementById("stateSel").selectedIndex; var y = document.getElementById("stateSel").options; var rowIndex = y[x]; var fee1 = document.getElementById("rates").rows[rowIndex.index + 1].cells[2].textContent; alert(fee1); } 

 <table class="table table-striped table-hover table-bordered table-responsive" id="rates"> <thead> <tr style="background-color: "><th>State</th><th>Fee1</th><th>Fee2</th><th>Fee3</th><th>Fee4</th><th>Fee5</th><th>Fee6</th></tr> </thead> <tbody id="rates"> <tr><td id="AR">Arkansas</td><td id="AR_F1">.04</td><td id="AR_F2">0.00</td><td id="AR_F3">0.00</td><td id="AR_F4">0.00</td><td id="AR_F5">0.00</td><td id="AR_F6">0.00</td></tr> <tr><td id="AZ">Arizona</td><td id="AZ_F1">.03</td><td id="AZ_F2">0.002</td><td id="AZ_F3">0.00</td><td id="AZ_F4">0.00</td><td id="AZ_F5">0.00</td><td id="F6_O">0.00</td></tr> <tr><td id="CA">California</td><td id="CA_F1">.03</td><td id="CA_F2">0.002</td><td id="CA_F3">0.00</td><td id="CA_F4">0.00</td><td id="CA_F5">0.00</td><td id="CA_F6">0.00</td></tr> </tbody> </table><br/> <select id="stateSel"> <option value="Arkansas">Arkansas</option> <option value="Arizona">Arizona</option> <option value="California">California</option> </select><br/> <table class="table table-bordered"> <tbody> <tr><td><h4>Tax Calculator</h4></td></tr> <tr><th>Fee1:</th><td><input type="text"/></td></tr> <tr><th>Fee2:</th><td><input type="text" /></td></tr> <tr><th>Fee3:</th><td><input type="text"/></td></tr> <tr><th>Fee4:</th><td><input type="text"/></td></tr> <tr><th>Total:</th><td><input type="text" id="totalAmount"/></td></tr> </tbody> </table> <br/> <button onclick="myFunction()">Calculate</button>