Question

我的HTML：

<table>
    <tr>
        <td>
          <input type="checkbox" name="checkbox[]" value="Volvo,4 wheels, hardtop"/>
        </td>
        <td>
            <select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
          <input type="checkbox" name="checkbox[]" value="Volvo,4 wheels, hardtop"/>
        </td>
        <td>
            <select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
        </td>
    </tr>
</table>

我希望复选框中值的第一个单词与下拉列表中选定的单词相同。但只在同一行。因此，如果第一行下拉列表中的值为“Saab”，则第二行中的值不应自动为“Saab”，但可以是不同的值。我怎样才能做到这一点？

Answer 1

为了方便可视化更改，我将复选框更改为文字，您可以在此处更改为type=text至type=checkbox

 $("select").change(function() {
        var setTarget= $(this).parent().prev().find("input[type=text]");
        var splitVal = setTarget.val().split(",");
        var sliceVal = splitVal.slice(1, splitVal.length).join(",");
        setTarget.val($(this).find('option:selected').text()+","+sliceVal);
    });

您可以使用该代码继续处理您的要求.. https://jsfiddle.net/havt1qbz/1/

Answer 2

也许是这样的事情？

<table>
    <tr>
        <td>
          <input id="chk01" type="checkbox" name="checkbox[]" value="Volvo,4 wheels, hardtop"/>
        </td>
        <td>
            <select id="s01">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
          <input id="chk02" type="checkbox" name="checkbox[]" value="Volvo,4 wheels, hardtop"/>
        </td>
        <td>
            <select id="s02">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
        </td>
    </tr>
</table>
<input type="button" value="Show checked results" id="btnShow"/>

    <script>
$('#s01').change(function(){//selectbox 01 change event
    var select_val = $( "#s01 option:selected" ).val();
    var checkbox_val = $('#chk01').val();
    var part_of_val = checkbox_val.split(',');
    checkbox_val =select_val+', '+part_of_val[1]+', '+part_of_val[2];
    $('#chk01').val(checkbox_val);
});
$('#s02').change(function(){//selectbox 02 change event
    var select_val = $( "#s02 option:selected" ).val();
    var checkbox_val = $('#chk02').val();
    var part_of_val = checkbox_val.split(',');
    checkbox_val =select_val+', '+part_of_val[1]+', '+part_of_val[2];
    $('#chk02').val(checkbox_val);
});
$('#btnShow').click(function(){// button click event
    if($('#chk01').is(':checked')){
        alert($('#chk01').val());
    }
    if($('#chk02').is(':checked')){
        alert($('#chk02').val());
    }
});
</script>

jquery使用下拉值更改输入值的第一部分

2 个答案: