jQuery实现select下拉列表内容切换，内容展示在input中。

柔情只为你懂 2022-05-21 10:51 628阅读 0赞

最近一直在写vue，使用框架大大程度提高了编程效率，但是随之而来的是，我们传统的编程，也在一点点儿的遗忘。。。  
今儿旁边同事问了一个说，jquery实现下拉列表中选择当前项，其内容显示在输入框中。  
我居然不会写了，曾经的多么顺手。。。  
所以在这里要重新捡起来，不能边学边忘。

DOM结构

<select name="" id="my-select">
         <option value="111111">11111111</option>
         <option value="222222">22222222</option>
         <option value="333333">33333333</option>
         <option value="444444">44444444</option>
     </select>
     <input type="text" id="my-input">

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
    $("#my-select").on("change",function () {  // 使用on进行事件绑定事件。
        $("select option:selected").each(function () {  // jq中的each()方法是遍历的对象的
            $("#my-input").val($(this).text()); // val()设置input的值，text()获取元素的文本内容。
        })
     });
     <script>

补充：  
**另附上cuishifeng大神的网站地址（非常全面的jQuery技术文档）** http://jquery.cuishifeng.cn/index.html

<script src="http://jquery.cuishifeng.cn/js/jquery-3.2.1_b5dbe7b.js"></script>

发表评论取消回复

表情：

评论列表（有 0 条评论，628人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui设置select下拉列表展示框的宽度

添加样式，可以放到head里面 <style type="text/css"> input.layui-input.layui-uns

客官°小女子只卖身不卖艺/ 2022年12月02日 00:26/ 0 赞/ 574 阅读

相关 jquery操作select 下拉列表

(注意：此处用的是jquery1.4.1) var index = $('\ddlBrand option:selected').attr('index');//获取选中项的

港控/mmm°/ 2022年09月29日 15:56/ 0 赞/ 180 阅读

相关 angularjs下拉列表 select

<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8">

柔情只为你懂/ 2022年07月14日 22:52/ 0 赞/ 191 阅读

相关 js引用<select>下拉列表选定的内容

需求： 1. 使用js获取select下拉列表里的内容，并显示在制定位置。 2. 默认显示第一个option内容。 3. 当下来列表选中的内容变化时，展示内容随之变化。

落日映苍穹つ/ 2022年06月16日 11:40/ 0 赞/ 188 阅读

相关 jquery-ajax请求后台数据转换json显示在select下拉列表&&jquery获取下拉列表的值和显示内容的方法

======================================jquery-ajax请求后台数据转换json显示在select下拉列表之前运用jquery-a

ゝ一世哀愁。/ 2022年06月06日 04:36/ 0 赞/ 256 阅读

相关 select下拉框内容平铺设置

在select下拉框标签中加入：multiple="multiple"的属性，就可以不用下拉，直接把内容平铺显示。例如： ![70][] 这里有一个问题，就是会有“请

た入场券/ 2022年05月25日 11:42/ 0 赞/ 416 阅读

相关 jQuery实现select下拉列表内容切换，内容展示在input中。

最近一直在写vue，使用框架大大程度提高了编程效率，但是随之而来的是，我们传统的编程，也在一点点儿的遗忘。。。今儿旁边同事问了一个说，jquery实现下拉列表中选择当前项

柔情只为你懂/ 2022年05月21日 10:51/ 0 赞/ 629 阅读

相关 JS或JQuery实现添加下拉选择框内容

具体代码如下： <html> <body> <select id="select" title="请选择" class="">

喜欢ヅ旅行/ 2021年09月24日 02:42/ 0 赞/ 352 阅读

相关 jquery 实现的select下拉列表

效果如下: ![20200602153152578.png][] html <div class="select_item"> <

浅浅的花香味﹌/ 2021年07月26日 19:05/ 0 赞/ 415 阅读

相关 HTML select 下拉列表

select 下拉列表由 `< select>` 和 `< option>` 标签配合使用生成。下拉列表控件提供可供选择的项，可以选中其中的一项或者多项。

小灰灰/ 2020年05月16日 17:43/ 0 赞/ 852 阅读