如何获得在td中选择的值

Question

我有一张桌子。我希望获得所选的价值

<tr class="table-info" id="tr1">

    <select class="form-control">
        <option>foobar</option><option>foobar2</option>
    </select>
    </td>
</tr>

我的javascript代码

var tr_day = document.getElementById("tr" + 1);
var tds_day = tr_day.getElementsByTagName("td");
console.log($("#" + tds_day[1].id).closest('select').find(':selected').html());

JsFiddle

Answer 1

＆＃13;

＆＃13;

var tr_day = document.getElementById("tr" + 1);
var tds_day = tr_day.getElementsByTagName("td");
for (var i = 0; i < tds_day.length; i++) {
  console.log($(tds_day[i]).find(":selected").text());
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="table-info" id="tr1">
    <td>
      <select class="form-control"><option>foobar/option><option>foobar2</option></select>
    </td>
  </tr>

</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

希望这会有所帮助

＆＃13;

＆＃13;

//You need to write script for all select options.
//This is for only one td
$('.form-control').change(function(){ 
    var value = $(this).val();
    console.log(value)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
    <th>Gunler</th>
    <Timeslot>
        <th><span class="saatBasl">Saatler</span></th>
            
    <th id="thSample">
        <span class="timeRange">09.00</span>
        <span>     -     </span>
        <span class="timeRange">09.50</span>
    </th>
    <th>
        <span class="timeRange">11.00</span>
        <span>     -     </span>
        <span class="timeRange">11.50</span>
    </th>
    <th>
        <span class="timeRange">12.00</span>
        <span>     -     </span>
        <span class="timeRange">12.50</span>
    </th>
    <th>
        <span class="timeRange">13.00</span>
        <span>     -     </span>
        <span class="timeRange">13.50</span>
    </th>
    <th>
        <span class="timeRange">14.00</span>
        <span>     -     </span>
        <span class="timeRange">14.50</span>
    </th>
    <th>
        <span class="timeRange">15.00</span>
        <span>     -     </span>
        <span class="timeRange">15.50</span>
    </th>
</tr>
</thead>
<tbody id="Table1">

    <tr class="table-info"  id="tr0">
        <td class="gun">Pazar</td>
     
        <td>

            <select class="form-control">
                <option>foobar</option>
                <option>foobar2</option>
            </select>
        </td>
    
    </tr>
    <tr class="table-info"  id="tr1">
        <td class="gun">Pazar</td>
     
        <td>

            <select class="form-control">
                <option>foobar</option>
                <option>foobar2</option>
            </select>
        </td>
    
    </tr>
    <tr class="table-info"  id="tr2">
        <td class="gun">Pazar</td>
     
        <td>

            <select class="form-control">
                <option>foobar</option>
                <option>foobar2</option>
            </select>
        </td>
    
    </tr>
    <tr class="table-info"  id="tr3">
        <td class="gun">Pazar</td>
     
        <td>

            <select class="form-control">
                <option>foobar</option>
                <option>foobar2</option>
            </select>
        </td>
        
    </tr>
    <tr class="table-info"  id="tr4">
        <td class="gun">Pazar</td>
     
        <td>

            <select class="form-control">
                <option>foobar</option>
                <option>foobar2</option>
            </select>
        </td>
    
    </tr>
    <tr class="table-info"  id="tr5">
        <td class="gun">Pazar</td>
     
        <td>

            <select class="form-control">
                <option>foobar</option>
                <option>foobar2</option>
            </select>
        </td>
        
    </tr>
    <tr class="table-info"  id="tr6">
        <td class="gun">Pazar</td>
     
        <td>

            <select class="form-control">
                <option>foobar</option>
                <option>foobar2</option>
            </select>
        </td>
        
    </tr>
</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以尝试这样的事情。迭代表tr并找到所选的选项。

var optionsList = [];
$.each('table tr',function(){
var currentOption = $(this).find('select option:selected').text();
console.log(currentOption);
optionsList.push(currentOption);
});

Answer 4

＆＃13;

＆＃13;

function select(){
  var val = $( ".form-control option:selected" ).text();
  console.log(val)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr class="table-info" id="tr1">
  <td>
    <select class="form-control" onchange="select()">
        <option>foobar</option>
        <option>foobar2</option>
        <option>foobar3</option>
    </select>
  </td>
</tr>
</table>
</body>

＆＃13;

＆＃13;

＆＃13;