select的下拉框onchage()事件，选择option输入到文本中

最新推荐文章于 2024-05-15 19:49:23 发布

WebCodeLad

最新推荐文章于 2024-05-15 19:49:23 发布

阅读量539

点赞数

分类专栏：下拉框onchage事件赋值给对应文本框从后台获取的值文章标签： ajax javascript jquery html5

本文链接：https://blog.csdn.net/qq_43277777/article/details/120206518

版权

下拉框onchage事件赋值给对应文本框同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

从后台获取的值

1 篇文章 0 订阅

订阅专栏

本文档展示了如何使用JavaScript的Ajax技术从后台动态获取数据填充下拉列表，并根据选中项更新相关详细信息。通过监听下拉列表的`onchange`事件，调用函数`cll()`更新地址和电话显示。同时，代码中包含了数据获取、DOM操作以及数据绑定的实现细节。

摘要由CSDN通过智能技术生成

给下拉框定义;

eg:

              <select class="form-control" id="sss" onchange="cll(this.value)" >
					//后面从后台获取添加的时候会清0下面 所以随便
                    <option value="0">值1</option>
					<option value="1">值2</option>
				</select>
  
       下拉列表获取到对应值
     <div id="div1">
				<table class="table table-bordered  mytab">
					<tr>
						<td><span>地址：</span></td>
						<td id="s1"></td>
					</tr>
					<tr>
						<td><span>电话：</span></td>
						<td id="s2"></td>
					</tr>

				</table>
			</div>

控制台看到的数据准备获取到

$.ajax({
						url:url,
						type: "get",
						async: false,
						dataType: "json",
						success: function(data) {
							console.log(data);
							//拿到图片  把图片赋值给定义全局变量的img1 
							img1=data.data[0].activeImg;
							 console.log(data.data[0].activeImg);
							 
							console.log("data====>", data);
							 //$("#detailpicture").append(img1);
							 $("#detailpicture").attr("src", img1);

							//下拉列表
							 $("#sss").find("option").remove();
							for (var i = 0; i < data.data.length; i++) {
                          	//如果在select中传递其他参数，可以在option 的value属性中添加参数
								$("#dianmian").append("<option value='" + i + "'>" + data.data[i].shopName + "</option>");
								
							     }
							//活动地址保存下来
							allList = data.data
                            console.log("select=====>",data.data);
							// $(document.getElementById("s1")).append(data.data[0].shopName+data.data[0].shopAddress);
							//方式一  给初始化值  （否则页面进去地址为空 点击才有值）
							//$(document.getElementById("s1")).append(allList[0].shopName+allList[0].shopAddress);
							//$(document.getElementById("s2")).append(allList[0].shopTel);
							//方式二调用 （否则页面进去地址为空 点击才有值）
							cll(0);
					 }
					});

 //定义一个有参函数
function cll(val) {
					// allList[val]
					//给s1改变一次 ，清空一次里面值
					$(document.getElementById("s1")).text('')
					//给s1拼接活动地址
					$(document.getElementById("s1")).append(allList[val].shopName+allList[val].shopAddress);
					//给s2改变一次 ，清空一次里面值
					$(document.getElementById("s2")).text('')
					//给s2直接赋值
					$(document.getElementById("s2")).append(allList[val].shopTel);
			       $(document.getElementById("s1")).append(num1.shopName+num1.shopAddress);
				  
				 
				 
				    
				}