如何使用 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());

});