Как получить выбор опции из ячейки таблицы с JQuery

Question

У меня есть ячейки таблицы заголовка с содержимым, как это:

<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>")) 

Я понятия не имею, где это «новая строка» прибывает из, и если она является источником моей проблемы, или как попасть внутрь него. Как получить выбранное значение?

Answer 1

Вы можете получить selected value непосредственно с помощью .val как вы используете jquery

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

Answer 2

.html() возвращает строку. Вы можете использовать $(":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>

Answer 3

Используйте find метод искать select, а затем val метод, чтобы получить выбранное значение.

Попробуйте

$(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); 
 
}); 
 
});

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

Answer 4

Попробуйте это:

<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(); 

Answer 5

Попробуйте

<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 для вас.