Question

如果我想获取下拉列表的值和文本，并将其放在两个文本字段中... 我只能得到值，但不能得到下拉文本.. 例如，在单击添加行并单击下拉列表后，下拉列表的值和文本将显示在两个文本字段中。这是代码

<HTML>
    <HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
    function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
            case "text":
            newcell.childNodes[0].value = "";
            newcell.childNodes[0].id = "txt"+rowCount;
            break;
            case "checkbox":
            newcell.childNodes[0].checked = false;
            break;
            case "select-one":
            newcell.childNodes[0].selectedIndex = 0;
            break;
            }
        }
    }
    function deleteRow(tableID) {
        try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {
            alert("Cannot delete all the rows.");
            break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
            }
            }
        }catch(e) {
        alert(e);
        }
    }
    function addVal(obj,ob){
        var suf = ob.parentNode.parentNode.rowIndex;
        var txt = document.getElementById('txt'+suf);
        txt.value = obj;
    }
    </SCRIPT>
    </HEAD>

    <BODY>
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    <TABLE id="dataTable" width="350px" border="1">
      <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD><INPUT type="text" id="txt0" name="txt"/></TD>
        <TD><INPUT type="text" id="txtt0" name="txtt"/></TD>
        <TD>
          <SELECT name="country" onchange="addVal(this.options[this.selectedIndex].innerHTML,this)">
            <OPTION value="in">India</OPTION>
            <OPTION value="de">Germany</OPTION>
            <OPTION value="fr">France</OPTION>
            <OPTION value="us">United States</OPTION>
            <OPTION value="ch">Switzerland</OPTION>
          </SELECT>
        </TD>
      </TR>
    </TABLE>
    </BODY>
    </HTML>

Answer 1

<强> Demo

将您的<select>更改为：

<SELECT name="country" onchange="addVal(this)">

将您的addRow功能更改为：

   function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;

            switch(newcell.childNodes[0].type) {
            case "text":
            newcell.childNodes[0].value = "";
            if(i == 1)
            {
             newcell.childNodes[0].id = "txt"+rowCount;
            }
            else if(i==2)
            {
             newcell.childNodes[0].id = "txtt"+rowCount;
            }
            break;
            case "checkbox":
            newcell.childNodes[0].checked = false;
            break;
            case "select-one":
            newcell.childNodes[0].selectedIndex = 0;
            break;
            }
        }
    }

将addVal函数更改为：

function addVal(ob){
    var suf = ob.parentNode.parentNode.rowIndex;
    var text = ob.options[ob.selectedIndex].text;
    var value = ob.value;

    document.getElementById("txt" + suf).value = text;
    document.getElementById("txtt" + suf).value = value
}

Answer 2

您只是传递所选选项的文本，而不是值。如果您只是传递下拉对象ob，则可以使用它来获取这两个部分：

function addVal(ob){
    var suf = ob.parentNode.parentNode.rowIndex;
    var txt = document.getElementById('txt'+suf);
    txt.value = ob.options[ob.selectedIndex].innerHTML;
    var val = document.getElementById('txtt'+suf);
    val.value = ob.options[ob.selectedIndex].value;
}

<SELECT name="country" onchange="addVal(this)"></select>

您还需要整理addRow（），以便第二个文本框与第一个文本框具有不同的ID，以便您的代码可以区分它们。拥有2个具有相同ID的元素在技术上是无效的html（请参阅http://www.w3schools.com/tags/att_global_id.asp中的定义和用法）

从动态行获取下拉值和文本到两个文本字段

2 个答案: