如何使用 jQuery 显示文本框中列表中的选定选项？

Question

我有以下表格：

在我的简单 mvc 模型中（下面是我的视图，此代码填充值）：

    @foreach (var item in Model)

    {

        <tr>

            <td>

                @Html.DisplayFor(modelItem => item.ID)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.CustomerName)

            </td>

                <select id="decisionList" name="@item.ID">

                    <option selected value="b"></option>

                    <option value="n">None</option>

                    <option value="c">Cancellation</option>

                    <option value="d">Date of payment</option>

                </select>

            </td>

            <td>

                <input id="choice" name="@item.ID" type="text">

            </td>

            <td>

        </tr>

    }

我想要做的是在相应的文本框中显示所选列表中的文本（因此我在第 3 行中为“选择”列选择了一些选项，并在“决定”列的第 3 个文本框中查看此文本）。我尝试了不同的方法，我添加了 attr 'name' 和 @item.ID 以通过模型中的 ID 定义每个行字段（注意：'name' 在数字后有空格'）

我写了一些js。- 目标是在更改选择时输入选定的文本。：

$('select#decisionList').change(function () {

    var textSelected = $(this).find(':selected').text();

    var nameSelected = $(this).attr('name');

    $('#choice').attr("[name*='"+ nameSelected +"']").val(textSelected);

   

});

它根本不起作用。我不知道该怎么做。“Foreach”为每个“名称”正确分配 ID，如上图所示。你知道如何在相应的（在本例中是旁边的字段）字段中显示选定的文本吗？也许我在这里展示的方法没用

Answer 1

获取选中的选项索引 HTMLSelectElement/selectedIndex使用SelectElement.options[ index ]定位 OPTION 元素使用 jQuery 的.closest() 方法引用公共 TR 父级使用 jQuery 的.find()方法查找元素$('.decisionList').on("change", function() {  const i = this.selectedIndex;  $(this).closest("tr").find(".choice").val(this.options[i].textContent);});<table>  <tr>    <td>111</td>    <td>Anna</td>    <td>      <select class="decisionList">        <option selected value="b"></option>        <option value="n">None</option>        <option value="c">Cancellation</option>        <option value="d">Date of payment</option>      </select>    </td>    <td><input class="choice" name="111" type="text"></td>  </tr>  <tr>    <td>222</td>    <td>John</td>    <td>      <select class="decisionList">        <option selected value="b"></option>        <option value="n">None</option>        <option value="c">Cancellation</option>        <option value="d">Date of payment</option>      </select>    </td>    <td><input class="choice" name="222" type="text"></td>  </tr></table><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>或者以更 jQuery 的方式使用这种方式：$('.decisionList').on("change", function() {  const $option = $(this).find(":selected");  $(this).closest("tr").find(".choice").val($option.text());});