0

ドロップダウンの値とテキストを取得し、両方のテキストフィールドに入れたい場合はどうすればよいですか..値のみを取得できますが、ドロップダウンテキストは取得できません..たとえば、行を追加してクリックした後、ドロップダウンをクリックすると、値とドロップダウンのテキストが両方のテキスト フィールドに表示されます。ここにコードがあります

<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>
4

2 に答える 2

1

デモ

次のように変更<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
}
于 2013-01-07T12:45:53.693 に答える
0

値ではなく、選択したオプションのテキストを渡すだけです。ドロップダウン オブジェクト 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>

また、コードがそれらを区別できるように、2 番目のテキスト ボックスが最初のテキスト ボックスとは異なる ID を持つように addRow() を整理する必要があります。同じ ID を持つ 2 つの要素を持つことは、技術的に無効な html です ( http://www.w3schools.com/tags/att_global_id.aspの定義と使用法を参照してください) 。

于 2013-01-07T12:35:59.087 に答える