jquery--select获取选中的option(类型为multiple，使用val()方法)，并更改form表单input内容

杰儿__er

已于 2023-02-24 20:21:42 修改

阅读量844

点赞数

分类专栏： WEB 文章标签： jquery Powered by 金山文档

于 2023-02-24 19:54:40 首次发布

本文链接：https://blog.csdn.net/weixin_42167759/article/details/129207356

版权

WEB 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

结果展示：

1.1 默认值（此时是input的默认值）

1.2 选择后（此时input内显示的是多选框选中的值）

代码展示（代码内的所有的$可以换成jQuery）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    function test_onclick(obj, type){
        var arr={'up':'#up_inerface', 'down':'#down_interface'};
        console.log(obj);
        console.log(jQuery(obj));        
        console.log(jQuery(obj).val()); //获取点击的值 
        
        console.log(arr[type]); //#up_inerface
        console.log(jQuery(arr[type]));  //相当于jQuery("#up_inerface")
        console.log(jQuery(arr[type]).val());    //input标签，id为up_inerface的value值为Volvo,Opel
        
        var val = jQuery(obj).val();
        jQuery(arr[type]).val(val);
    }
</script>
</head>
<body>
<form method="post" action="demoform.html">
<input type="text" name="up_inerface" id="up_inerface" value="Volvo,Opel"/>
<select multiple onclick="test_onclick(this,'up')">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
    <br/>
    <br/>
  <input type="text" name="down_interface" id="down_interface" value="Opel,Audi"/>
<select multiple onchange="test_onclick(this,'down')">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
    </form>
  
</body>
</html>

本文技巧

使用了 var arr={'up':'#up_inerface', 'down':'#down_interface'};数组，跟据变量对up和down的input，用统一行代码$(arr[type]).val(val);进行赋值。

代码解释

console.log(obj);  打印结果如下：

<option value="volvo">Volvo</option>

</select>

console.log($(obj));

console.log($(obj).val()); //获取点击的值

console.log(arr[type]); //#up_inerface

console.log($(arr[type]));  //相当于$("#up_inerface")

console.log($(arr[type]).val());//input标签，id为up_inerface的value值为Volvo,Opel

参考连接：

js 根据value设置选择的option，以及获取选中option的value

https://blog.csdn.net/weixin_43632687/article/details/109617024

杰儿__er

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jquery--select获取选中的option(类型为multiple，使用val()方法)，并更改form表单input内容

jquery--select获取选中的option(类型为multiple，使用val()方法)，并更改form表单input内容
复制链接

扫一扫