select2搜索选择给多个文本框赋值

使用select2前端组件给多文本框动态赋值

最新推荐文章于 2024-06-24 11:26:29 发布

原创

最新推荐文章于 2024-06-24 11:26:29 发布 · 621 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#select2 #前端 #html

本文介绍了如何在前端页面利用select2组件，在新增和修改操作中给多个文本框动态赋值。详细阐述了前端orderFormAdd.html的实现，以及后端controller、impl方法和接口的代码结构。在修改场景下，通过调用预先封装的addSelectIss()和loadDataIss()方法，实现了与新增操作相同的赋值效果。

1、先看效果图

2、代码实现

前端页面实现

orderFormAdd.html

<div class="wrapper wrapper-content animated fadeInRight ecommerce">
	<div class="row">
		<form class="form-horizontal" id="orderFormAddForm" method="post">
			<div class="form-group hidden">
            	<label class="col-lg-2 control-label">ID</label>
                <div class="col-lg-3">
                	<input type="text" class="form-control" name="id"/>
                </div>
            </div>
			<div class="form-group">
            	<label class="col-lg-2 control-label"><span class="text-danger">*</span> 客户名称</label>
                <div class="col-lg-3">
                	<select class="form-control" name="customerId" id="customerId_POP">
               		</select>
                </div>
            </div>
            <div class="form-group">
				<label class="col-lg-2 control-label"><span class="text-danger">*</span> 客户电话</label>
                <div class="col-lg-3">
                	<input type="text" class="form-control" name="phoneNumber" id="phoneNumber_POP"/>
                </div>
				<label class="col-lg-3 control-label"> 送货日期</label>
                <div class="col-lg-3">
                	<div class="input-group date">
						<input type="text" class="form-control _searchDate" name="deliveryDate" id="deliveryDate"/><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
					</div>
                </div>
            </div>
            <div class="form-group">
				<label class="col-lg-2 control-label"><span class="text-danger">*</span> 送货地址</label>
                <div class="col-lg-9">
					<input type="text" class="form-control" name="address" id="address_POP"/>
                </div&g