jquery - 从下拉列表中获取文本并使用 JQuery 将其插入到输入文本中？

Question

如何使用 jquery 从下拉列表中获取文本并将其插入到输入文本中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-0-item">
        Item 0:
    </label>
    <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-1-item">
        Item 1:
    </label>
    <select class="form-control" id="id_lines-1-item" name="lines-1-item" title="">
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-1-label" type="text" />
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-2-item">
        Item 2:
    </label>
    <select class="form-control" id="id_lines-2-item" name="lines-2-item" title="">
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-2-label" type="text" />
<script>
    var label1 = document.getElementById('id_lines-0-item');
    var strlabel1 = label1.options[label1.selectedIndex].text;
    $('input:text').val(strlabel1);
</script>

我试过上面的代码，但它不起作用，如果这是一个愚蠢的问题，请原谅我，因为我正在学习 jquery。

我已经更新了我的问题。我需要使用 id="id_lines-0-item" 从下拉列表中获取文本，并将值设置为使用 id="id_lines-0-label" 输入文本并分别使用 id="id_lines-1-item" 从下拉列表中获取值，并将值设置为使用 id="id_lines-1-label" 和很快。这可以使用 DRY(不要重复自己)来完成吗？

Answer 1

您可以在 select 下拉菜单中关联一个 onchange() 函数，并使用 selection.options[selection.selectedIndex].text 来获取所选选项的文本使用 JavaScript。因为，您有 id 作为 text 输入，所以最好使用 id 选择器。在你的情况下 $('#id_lines-0-label')。此外，由于您有单独的文本输入用于单独的下拉列表，并且您不想为所有三个下拉列表重复代码，因此最好使用下拉列表的 id 中的数字值。使用此值并连接以获取 input 框的 id。

function onchangeFn(selection) {
    var id= $(selection).attr('id');
    var num = id.match(/\d+/)[0];
    var strlabel1 = selection.options[selection.selectedIndex].text;
    $('#id_lines-'+num+'-label').val(strlabel1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-0-item">
        Item 0:
    </label>
    <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="" onchange= 'onchangeFn(this)'>
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-1-item">
        Item 1:
    </label>
    <select class="form-control" id="id_lines-1-item" name="lines-1-item" title="" onchange = 'onchangeFn(this)'>
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-1-label" maxlength="255" name="lines-1-label" type="text" />
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-2-item">
        Item 2:
    </label>
    <select class="form-control" id="id_lines-2-item" name="lines-2-item" title="" onchange = 'onchangeFn(this)'>
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-2-label" maxlength="255" name="lines-2-label" type="text" />