javascript - 使用javascript单击相应表行单选按钮时如何获取选择框值？

Question

使用javascript单击相应表格行单选按钮时如何获取选择框值？

我有 3 个单选按钮，当选择其中一个时，我想自动获取相应的行选择框 toyname 到文本框 toynamelpd

<input type="text" value="" name="toynamelpd" id="toynamelpd">
<table class="table table-condensed table-striped table-bordered" style="width: 100%;" ng-if="lessonPlanDailys.length > 0">
    <thead style="height: 60px; overflow: auto;">
        <tr>
        <th style="text-align: center;color: teal;width: 5%;padding: 1%;"></th>
        <th style="text-align: center;color: teal;width: 5%;padding: 1%;">#</th>
        <th style="color: teal;width: 15%;text-align: center;padding: 1%;">Toys</th>
        </tr>
    </thead>
<tbody>
    <%
    int index = 1;
    for (Map<String, Object> eachtoyPlanDaily : toyPlanDailys) 
    {
    %>
    <tr>
        <td style="text-align: center;width: 5%; "><input type="radio" id="toyPlanId" name="toyPlanId" value="<%=eachtoyPlanDaily.get("_id").toString()%>" onchange="selecttpd()"></td>
    <td style="text-align: center;width: 5%; "><%=index++%></td>
    <td style="width: 15%;text-align: justify; ">
            <select name="toynamelp" id="toynamelp" value="this.value">
            <option value="select">-------------select-------------</option>
            <%
            Iterator iterator = toynameList.entrySet().iterator();
            while (iterator.hasNext()) {
                Map.Entry mapEntry = (Map.Entry) iterator.next();
                if(eachtoyPlanDaily.get("toyname") != null && eachtoyPlanDaily.get("toyname").equals(mapEntry.getValue())){
                %>
                    <option selected value="<%=mapEntry.getKey()%>"><%=mapEntry.getValue()%></option>
                <%
                }
                else {
                %>
                    <option value="<%=mapEntry.getKey()%>"><%=mapEntry.getValue()%></option>
                <% 
                }
            }
            %>
        </select>
    </td>
    </tr>
   <%
   }
   %>
</tbody>
</table>

Answer 1

试试这个代码。希望它能起作用..

HTML:

<tr>
    <td>
        <select id="select-td-1">
            <option>Value 11</option>
            <option>value 12</option>
        </select>
    </td>
    <td> 
        <input class="clicked" type="radio" data-attr="td-1">
    </td>
</tr>
<tr>
    <td>
        <select id="select-td-2">
            <option>Value 21</option>
            <option>value 22</option>
        </select>
    </td>
    <td> 
        <input class="clicked" type="radio" data-attr="td-2">
    </td>
</tr>
<tr>
    <td>
        <select id="select-td-3">
            <option>Value 31</option>
            <option>value 32</option>
        </select>
    </td>
    <td> 
        <input class="clicked" type="radio" data-attr="td-3">
    </td>
</tr>

JQuery:

$(document).ready(function(){
    $('.clicked').on('click', function(){
        var attr = $(this).attr('data-attr');
        var selectval = $("#select-"+attr).val();
        console.log(selectval);
    });
});