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

Posted 2023-05-09

【中文标题】如何使用 jQuery 从文本框中的列表中显示选定的选项？

【英文标题】：How can I show selected option from list in textbox using jQuery?

【发布时间】：2021-01-30 19:03:46

【问题描述】：

我有以下表格：

在我的简单 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>
    

我想要做的是在 corresponding 文本框中显示所选列表中的文本（因此我在“选择”列的第三行中选择了一些选项，并在“决定”列的第三个文本框中查看此文本'）。我尝试了不同的方法，我在 @item.ID 中添加了 attr 'name' 以通过模型中的 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' 为每个'name' 正确分配 ID，如上图所示。你知道如何在相应的（在这种情况下是旁边的字段）字段中显示选定的文本吗？也许我这里显示的方法没用

【问题讨论】：

为什么要让两个字段具有相同的name="" 在服务器端如何区分它们？

另外，拥有 "Decision" 字段毫无意义。 <select>已经决定了。

因为我不知道如何在文本框中显示选定的选项，并认为也许我会尝试使用相同的“名称”：选择列表和文本框。如果您有其他想法我应该如何解决请给我一个提示

@RokoC.Buljan 我知道你的意思，但出于某种目的我需要这个专栏

另外，您的 HTML 标记无效，您已打开 <td>

【参考方案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的fashion中也这样：

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