0

我的表格中有不止一行。基本上每行有两个下拉框。第二个下拉框的值根据第一个下拉框中的选择进行更新。如何一次将 javascript 应用于单个行？说当我更改第二行中的第一个下拉框时，我希望第二个下拉框仅在第二行中更新。另外，如何使用数组将多行数据更新到同一个数据库。这是我的代码：

<form action='purchase.php' method="POST"> 
<table><tr><td>Supplier</td><td>Item Name</td></tr>
<tr><td><select name ="supplier" id = "supplier" onchange = "updatesup()">
<option value = "1"> SUPA </option><option value = '2'>SUPB</option></select> </td>
<td> <Select name ="itemname" id="itemname"><option value = ""> Select Item</option></select>/td></tr>
<tr><td><select name ="supplier" id = "supplier" onchange = "updatesup()">
<option value = "1"> SUPA </option><option value = '2'>SUPB</option></select> </td>
<td> <Select name ="itemname" id="itemname"><option value = ""> Select Item</option></select>/td></tr></table></form>

在选择供应商时..我想更改项目名称下拉列表中的项目..但我希望更改仅发生在相应的下拉列表中...我该怎么做？

这是我正在使用的 javascript

array iteam_a;
item_a[0] = [1, item1, 1];
item_a[1] = [2, item2, 1];
item_a[2] = [3, item2, 1];
item_a[3] = [4, item4, 2];
item_a[4] = [5, item5, 2];
item_a[5] = [6, item6, 2];
function updatesup(){
    removeAllOptions(document.getElementById('itemname'));
    addOption(document.getElementById('itemname'), "", "Select Item");

    for (var i = 0; i <= item_a.length-1; i++){
        if (item_a[i][2] === document.getElementById('supplier').value){
                addOption(document.getElementById('itemname'), item_a[i][0], item_a[i][1]);
            }
     }   

 }

function addOption(selectbox, value, text ){
    var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
 }               

function removeAllOptions(selectbox)
{
var j;
for(j=selectbox.options.length-1;j>=0;j--)
{
    selectbox.remove(j);
}
   }
4

2 回答 2

1

看看knockout.js

它允许您在 Javascript 中构建 MVVM 模型，并且可以轻松实现您想要的。网站上有很多例子。在第 9 频道上，Steve Sanderson 对 knockout.js 进行了精彩的演示。

于 2012-09-04T17:39:18.793 回答
0

您可以更改 updatesetup 方法的签名。

定义两个参数，比如 mainindex 和 subindex，它们必须从该行接收每个元素的索引，例如：

function updatesup(mainindex, subindex){
    removeAllOptions(document.getElementById('itemname_' + subindex));
    addOption(document.getElementById('itemname_' + subindex), "", "Select Item");

    for (var i = 0; i <= item_a.length-1; i++){
        if (item_a[i][2] === document.getElementById('suplier_' + subindex).value){
                addOption(document.getElementById('itemname_' + subindex), item_a[i][0], item_a[i][1]);
        }
 }

请注意，我已经更改了要搜索的 id ...因此，在您的 html 中，使用索引序列构建了第行

<form action='purchase.php' method="POST"> 
<table><tr><td>Supplier</td><td>Item Name</td></tr>
<tr><td><select name ="supplier_0" id = "supplier_0" onchange = "updatesup()">
<option value = "1"> SUPA </option><option value = '2'>SUPB</option></select> </td>
<td> <Select name ="itemname_0" id="itemname_0"><option value = ""> Select Item</option>        </select>/td></tr>
<tr><td><select name ="supplier_1" id = "supplier_1" onchange = "updatesup()">
<option value = "1"> SUPA </option><option value = '2'>SUPB</option></select> </td>
<td> <Select name ="itemname_1" id="itemname_1"><option value = ""> Select Item</option>        </select>/td></tr></table></form>
于 2012-09-04T17:47:13.023 回答