如何使用jquery从表格单元格中选择选项

时间:2016-12-23 05:40:12

标签: javascript jquery

我有一个表格标题单元格,内容如下:

<th rowspan="1" colspan="1">
    <select>
        <option value="date" selected="selected">Date</option>
        <option value="number">Number</option>
    </select>
</th>

我试图像这样获得所选的值

var $selectors = $("#myTable thead tr th").each(function(index)
{
    var cell = $(this).html();
    console.log ("Cell:" + cell.toSource());
    var value = cell.options[cell.selectedIndex].value;
});

但是当我尝试读取所选值时出现错误

TypeError: cell.selectedIndex is undefined

如果我使用cell.toSource()将单元格转储到控制台,则它看起来像这样

Cell:(new String("<select><option value=\"\"></option><option value=\"date\" selected=\"selected\">Date</option><option value=\"number\">Number</option></select>"))

我不知道'新字符串'来自哪里,如果它是我的问题的根源,或者如何进入它。如何获得所选值?

5 个答案:

答案 0 :(得分:1)

您可以在使用selected value时直接使用.val获取jquery

$(function () {
  $('#myTable thead tr th').each(function () {
      alert($(this).find("select").val());
   });
});

答案 1 :(得分:1)

试试这个

 <table id="myTable"><thead>
      <tr>
        <th rowspan="1" colspan="1">
         <select onchange="change()">
            <option value="date" selected="selected">Date</option>
            <option value="number">Number</option>
         </select>
       </th>
      </tr>
    </thead>
</table>

这是jquery代码

change = function () {
  $('#myTable thead tr th select').each(function () {
      console.log($(this).val());
    });
};

以下是您的工作pen

答案 2 :(得分:0)

$(":selected", this)返回一个字符串。您可以使用option.each()中获取所选的var $selectors = $("#myTable thead tr th") .each(function(index) { var selected = $(":selected", this); console.log(selected.val()); });元素。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table id="myTable">
  <thead>
<th rowspan="1" colspan="1">
    <select>
        <option value="date" selected="selected">Date</option>
        <option value="number">Number</option>
    </select>
</th>
    </thead>
  </table>
hive.metastore.warehouse.dir

答案 3 :(得分:0)

使用find方法查找select然后val方法以获取所选值。

试试这个

&#13;
&#13;
$(document).ready(function(){
 $("#myTable thead tr th").each(function()
 {
   var value = $(this).find('select').val(); // This will get the dropdown's selected value
   alert(value);
 });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable"><thead> <tr>
<th rowspan="1" colspan="1">
    <select>
        <option value="date" selected="selected">Date</option>
        <option value="number">Number</option>
    </select>
</th>
   </tr>
  </thead></table>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

试试这个:

<table>
    <thead>
        <tr>
            <th rowspan="1" colspan="1">
                <select>
                    <option value="date" selected="selected">Date</option>
                    <option value="number">Number</option>
                </select>
            </th>
        </tr>
    </thead>
</table/>

$('#dataTable thead tr th select [selected="selected"]').val();