如何使用javascript点击相应的表行radiobutton时获取selectbox值?

时间:2017-02-06 14:06:31

标签: javascript jquery html

如何在使用javascript点击相应的表行radiobutton时获取selectbox值?

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

1 个答案:

答案 0 :(得分:0)

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

<强> 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);
    });
});