亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 jQuery 顯示文本框中列表中的選定選項?

如何使用 jQuery 顯示文本框中列表中的選定選項?

三國紛爭 2023-05-19 15:08:47
我有以下表格:在我的簡單 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,如上圖所示。你知道如何在相應的(在本例中是旁邊的字段)字段中顯示選定的文本嗎?也許我在這里展示的方法沒用
查看完整描述

1 回答

?
米琪卡哇伊

TA貢獻1998條經驗 獲得超6個贊

  • 獲取選中的選項索引?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());

});


查看完整回答
反對 回復 2023-05-19
  • 1 回答
  • 0 關注
  • 121 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號