場景

實現效果如圖：

?

實現

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("其它退貨點")}//退貨目的地聯動完成}); });

?

總結

以上是生活随笔為你收集整理的Jquery中绑定select的change事件自动填充input的value值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。