Jquery中绑定select的change事件自动填充input的value值

淩亂°似流年 2023-10-18 20:11 36阅读 0赞

## 场景 ##

实现效果如图：

![Image 1][]![20190620105213270.gif][]

## 实现 ##

### html代码 ###

这里使用的是thymelaf模板

下拉框select代码：

<select class="form-control" name="businessInitiator"  id="businessInitiator">
                                                <option  id="yuanliaoInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '原料立库'}" value="原料立库"><span th:text="原料立库"></span></option>
                                                <option  id="qingjieInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '清洁车间'}" value="清洁车间"><span th:text="清洁车间"></span></option>
                                                <option  id="zhengjiInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '正极车间'}" value="正极车间"><span th:text="正极车间"></span></option>
                                                <option  id="fujiInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '负极车间'}" value="负极车间"><span th:text="负极车间"></span></option>
                                                <option value="" disabled selected hidden>选择退货发起方</option>
                                            </select>

input框代码：

<div class="form-group row col-md-6">
                                            <label class="col-sm-2 col-form-label">退货目的地</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="destination" id="destination"
                                                       readonly>
                                            </div>
                                        </div>

### Jquery代码 ###

$(document).ready(function() {
     
        //选择退货方后退货目的地绑定联动
        $("#businessInitiator").bind("change", function () {
            //获取选中的option的value值
            var selected = $("#businessInitiator option:selected").val();
            //获取退货目的地Input对象
            var destination = $("#destination");
            switch (selected){
                case '原料立库':
                    destination.val("原料立库退货点")
                    break;
                case '清洁车间':
                    destination.val("清洁车间退货点")
                    break;
                case '正极车间':
                    destination.val("正极车间退货点")
                    break;
                case '负极车间':
                    destination.val("负极车间退货点")
                    break;
                default:
                    destination.val("其它退货点")
            }
            //退货目的地联动完成
        });
    });

[Image 1]: 
[20190620105213270.gif]: https://img-blog.csdnimg.cn/20190620105213270.gif