将select选中的option的value放进表单的input中

原创于 2019-12-19 14:40:53 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #select #input

jquery 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的动态联动效果，当选择下拉框（Select）时，其对应的输入框（Input）会自动填充所选值。通过解析Select的ID获取数字标识，并以此匹配相应的Input进行值的赋写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码：

html:

<select id="attr0" onchange="setInput3(this)" class="select1">
    <option value="">请选所属小类</option>
    <option value="1">1 食品</option>
    <option value="2">2 药品</option>
</select>

<input type="text" class="organ-info cenz input box" name="attrList[0].attrid"
       id="attrid0" placeholder="请选择商品属性" autocomplete="off"/>

jq:

function setInput3(obj){
    var obj1 = $(obj);
    var num= obj.id.replace(/[^0-9]/ig,"");//将select的id截取数字
    var attrid = obj1.val();
    $("#attrid"+num).val(attrid);//赋值
}

其中，select的id命名和input命名是有规则的，原意是想做一个动态的命名，有多对select和input。所以需要将select的数字截取出来，然后将value赋值给和它一对的input。注意：id的命名不能有"."，如果id命名为attrList[0].attrid，那么在jq中必须用转义字符——$("#attrList["+num+"]\\.attrid") 此坑已趟。。。