Question

下面的代码显示了一个包含2行和3列的表格。选择列表位于第一行的最后一列。我可以从ID获取信息：sn2＆amp; car3（列表中其中一辆车的ID）。

此代码已从w3schools修改：

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 table, th, td {
     border: 1px solid black;
 }
 </style>
 </head>
 <body>

 <h3>A demonstration of how to access a TR element</h3>

 <table>
   <tr id="myRow1">
     <td>First cell</td>
     <td id ="rr2">Second cell</td>
     <td id="car2">
 <select id="carlist">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option id ="car3" value="opel">Opel</option>
   <option value="audi">Audi</option>
 </select>
 </td>
   </tr>

 <tr id="myRow">
     <td>First cell</td>
     <td id = "sn2">XYZ999 </td>
     <td>Third cell</td>
   </tr>

 </table>

 <p>Click the button to delete the first cell from the table row.</p>

 <button onclick="myFunction()">Try it</button>

 <script>
 function myFunction() {
     obj = document.getElementById("sn2");
     alert(  obj.lastChild.data  );

     obj = document.getElementById("car3");
     alert(  obj.lastChild.data  );
 }
 </script>

 </body>
 </html>

我无法从所选项目的carlist中获取值。

Answer 1

要获取carlist中所选项目的值，请使用：

cdn

Answer 2

我创建了一个JSfiddle，向您展示如何获取所选值。

我归结为：

// Get the SelectElement
obj = document.getElementById("carlist");
// show the Selected Value
alert(obj.value);

Answer 3

表单元素为.value，而非.data，表格单元格为.innerHTML或textContent
将ID放在选项上并不常见。在您的情况下，所选值将显示为document.getElementById("idOfYourSelect").value document.getElementById("carlist").value
要获取所选选项的文本，普通JS中最兼容的版本为var sel = document.getElementById("carlist"), opt=sel.options[sel.selectedIndex].text;，如您自己找到的那样。
在jQuery中，您可以使用$("#carlist option:selected").text();，而JS中的更长且不直观的替代方案是 document.getElementsByTagName("select")[0].querySelectorAll("option:checked")[0].text

window.onload=function() {
    document.getElementById("bt1").onclick=function() {
        var sel = document.getElementById("carlist"), 
            optText=sel.options[sel.selectedIndex].text,
            optValue=sel.options[sel.selectedIndex].value;
        alert(optText+":"+optValue);
    }
    document.getElementById("bt2").onclick=function() {
        alert(document.getElementById("sn2").innerHTML);
    }

}

 table, th, td {
     border: 1px solid black;
 }

 <h3>A demonstration of how to access a TR element</h3>

<table>
    <tr id="myRow1">
        <td>First cell</td>
        <td id="rr2">Second cell</td>
        <td id="car2">
            <select id="carlist">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
        </td>
    </tr>
    <tr id="myRow">
        <td>First cell</td>
        <td id="sn2">XYZ999</td>
        <td>Third cell</td>
    </tr>
</table><hr/>
<button id="bt1">Selected option of row 1, cell 3</button>
<button id="bt2">Content of second row second cell</button><br/>

Answer 4

从

更改您的代码

obj = document.getElementById("car3");
alert(  obj.lastChild.data  );

到

obj = document.getElementById("car3");
alert(  obj.value  );

如何在表格中嵌入选择元素？

4 个答案: