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

问题描述

我的格式如下：

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

    @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>
    }

我想做的是在对应文本框中显示所选列表中的文本（因此我在“选择”列的第三行中选择了一些选项，并在“决策”列的第三文本框中看到了此文本'）。我尝试了不同的方法，我在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。您是否知道如何在相应的（在此情况下为“下一个”字段）字段中显示选定的文本？也许我这里显示的方法没用

解决方法

• 获取选定的选项 index 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 fashion

$('.decisionList').on("change",function() {
  const $option = $(this).find(":selected");
  $(this).closest("tr").find(".choice").val($option.text());
});