使用2下拉列表将新行添加到表中-如何更改选择的名称

如果有人能帮助我，我将不胜感激。 两天来，我试图独自解决这个问题，但它不起作用。

我正在为我在学校的项目写一份购物清单。我有一个包含表单的表（购物清单）。

在我有 2 个下拉列表的形式中，一个（产品）从我的数据库中获取值，第二个（数量）是常量数字。 在这两个旁边，我有 2 个按钮添加和删除。

按添加时，我想添加具有相同内容的新行。

问题是我无法（或者可能不知道如何）根据行号更改选择名称。我的意思是喜欢

最后一件事 - 仅当用户从两个选择中进行选择时，才会添加该行，而不仅仅是从一个选择。

这是我的代码：JavaScript 添加和删除函数：

 function addRow(tableID) {
if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value!="zero") 
{
            var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
            var colCount = table.rows[0].cells.length;
            for(var i=0; i<=colCount; i++) {
             var newcell = row.insertCell(i);
                 newcell.innerHTML = table.rows[1].cells[i].innerHTML;
              switch(newcell.childNodes[1].type) {
                case "text":
                        newcell.childNodes[1].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[1].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[1].selectedIndex = 0;
                        break;
                }
            }
              newcell.childNodes[1].visible = true;
              table.rows[rowCount-1].cells[2].style.visibility="hidden" ;
            }
            else
          {
            if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value=="zero") 
                 alert("please choose quantity") ;
               if (document.getElementById("product").value=="dafult" && document.getElementById("quantity").value!="zero") 
                alert("please choose product") ; 
               if (document.getElementById("product").value=="dafult" && document.getElementById("quantity").value=="zero") 
                    alert("please choose product and qantity") ;
           }
            }
        function deleteRow(i){
        if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value!="zero") 
            document.getElementById('shopinglist').deleteRow(i)
        else
            alert("you can't delete row before adding it");
}

以及 HTML 和 ASP

<table border="0" id="shopinglist">
<caption valign="top" style="width:90%;height:35px; color:green ;"/> your order 
<tr><td></td><td> product</td> <td> quantity</td></tr>
<tr>
<form name="juices">
    <%      
    set rs=Server.CreateObject("ADODB.recordset")
    rs.open "SELECT ID, [Product-Name] ,[size-liter],[Customer price] FROM Product GROUP BY  ID,[Product-Name] ,[Product].[size-liter],[Product].[Customer price] ", conn
    %>
<td>
<select name="product" id="product" width="10" >
<option value="dafult" selected>בחר מוצר מהרשימה</option>
<%
do while not rs.EOF %>
<option value=<%=rs("Product-Name")%> > juice<%=rs("Product-Name")%>   <%=rs("size-liter")%>  liter<%=rs("Customer price")%>  $</option>
<%
rs.MoveNext()
loop
rs.close %> 
</select>
</td>
<td>
<select name="quantity" id="quantity">
<option value="zero" selected="selected">0</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
<option value="six">6</option>
<option value="seven">7</option>
<option value="eight">8</option>
<option value="nine">9</option>
<option value="ten">10</option>
</select>
</td>
<td>
<input type="button" value="add" onclick="addRow('shopinglist')" id="addbutton"/>
</td>
<td>
    <input type="button" value="delete"onclick="deleteRow(this.parentNode.parentNode.rowIndex)" id="remove"/>
</td>
</tr>
         </form>