如何根据所选值在文本框中显示文本？ [关闭]答案

【问题标题】：How to show text in a textbox based on selected value? [closed]如何根据所选值在文本框中显示文本？ [关闭]
【发布时间】：2020-10-11 16:34:08
【问题描述】：

我正在处理我的 MVC 项目，需要将所选值与文本框绑定 - 我的意思是当您在所选列表中选择一个项目时，该值会出现在文本框中。这是一个例子：

            <div class="row">               
                <select id="chasis" name="type">
                
                    <option value="sedan">sedan</option>
                    <option selected value="hatchaback">hatchback</option>
                    <option value="cabrio">cabrio</option>
                    <option value="coupe">coupe</option>
                
                </select>
            </div>
                
            <label>Your choice is: <input id="chasisText" type="text" value=""></label>

和 jQuery 代码：

    <script>
    
    $(function() {

        $("select#chasis").change(function(e){
            $("#chasisText").val(e.target.value);   
        }); 
});
    </script>

此代码运行良好，但我的问题是是否有任何其他方式可以在文本框中显示所选值？也许更容易或更棘手？

【问题讨论】：

不，那是最理想的jQuery方法。你可以用 ES6 让它更简洁一些，但这并不是“更好”jsfiddle.net/RoryMcCrossan/3mevf9c6
一次性真的没有比这更简单的了。如果您需要为多对选择/输入复制此内容，则可以使用一种通用方法
好的，问题是这段代码提取的是价值，而不是文本。我的意思是我现在需要将值命名为与文本相同的名称来检索 'sedan so:<option value="sedan"> 最后我想提取文本，而不是值。例如。如果我有<option value="auto">sedan</option> 我的代码检索“自动” - 我想检索文本“轿车”并将其显示在我的文本框中。我怎么能这样做？
所以不要使用e.target.value，而是使用$(this).find(':selected').text()。请注意，您的问题表明它已经按预期工作，并且没有提及该选项的文本
更棘手？真的吗？

标签： javascript c# jquery

【解决方案1】：

如果你还没有添加jquery cdn到你的HTML的head部分，如果已经添加则忽略。

添加chasisChange函数来选择

<select id="chasis" onchange="chasisChange()" name="type">

当 HTML 的 select 部分的值发生变化时，将执行下面的 Jquery 函数 (chasisChange())。

function chasisChange(){
var val =  $('#chasis').val();
console.log(val);
$('#chasisText').val(val);
}

working example

【讨论】：