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

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 使用下拉值更改输入值的第一部分

jquery change first part of input value with dropdown value

jquery

html

checkbox

dropdown