精华内容
下载资源
问答
  • VUE 实现两个select联动效果
    2021-03-22 11:24:36

    两个下拉框,当选择A的时候B会跟着联动

    template代码

    <el-form-item label="名称:">
            <el-select v-model="formData.houseName" placeholder="请选择">
              <el-select-menu slot="menu">
                <el-select-item
                  v-for="item in houseNameList"
                  :label="item.houseName"
                  :key="item.houseName"
                  :value="item.houseName"
                ></el-select-item>
              </el-select-menu>
            </el-select>
          </el-form-item>
          <el-form-item label="号码:" prop="roomNo" class="not-inline">
            <el-select v-model="formData.roomNo"  placeholder="请选择">
              <el-select-menu slot="menu">
                <el-select-item
                  v-for="item in roomNoList"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                ></el-select-item>
              </el-select-menu>
            </el-select>
          </el-form-item>

    script代码

    watch: {
        'formData.houseName': {
          deep: true,
          handler(n, o) {
            this.roomNoList = this.houseNameList
              .filter((item) => item.houseName == n)[0]
              .roomNoList.map((item) => {
                return { label: item, value: item };
              });
          }
        }
      },

     

    更多相关内容
  • 要实现联动效果注意两点: 第一要可以监听到select的change事件; 第二异步加载的内容,需要重新渲染后才可以 正常使用。 html结构: <form class=layui-form batchinput-form action= id=box-form> 所在...
  • 本文实例讲述了JS简单实现多级Select联动菜单效果代码。分享给大家供大家参考。具体如下: JS联动菜单,简单代码实现JS多级Select联动菜单,也就是大家常用的一款菜单,Select联动状态的菜单,网页上经常见到的效果...
  • NULL 博文链接:https://heisetoufa.iteye.com/blog/353661
  • 主要介绍了javascript实现无限联动菜单的方法和示例,思路非常棒,需要的朋友可以参考下
  • 今天小编就为大家分享一篇laravel-admin解决表单select联动时,编辑默认没选上的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • select联动菜单

    2015-06-05 10:43:55
    select实现双联动选择菜单;兼容IE6+及大众标准浏览器;
  • 下拉select选项多级联动实例。 cxselect插件使用方法: 1. 引入JS, [removed][removed]  [removed][removed]  2. JS项设置。Find more here:http://code.ciaoca.com/jquery/cxselect/ [removed]$('#cnMap')...
  • 代码如下: [removed][removed] 代码如下: <FORM name=”form5″ id=”form5″ action=”” method=”post” target=”_blank” onsubmit=”document.charset=’GB2312...select id=”domainNewHouse” name=”domain
  • 效果如下:当type值选择完后,amount值会自动相应填入。1. 从后台获取数据,为一个数组,里面包含多个对象。...select first.id, first.type, second.amountfrom scholarshipType first,scholarshipType secondwhere...

    效果如下:

    当type值选择完后,amount值会自动相应填入。

    1. 从后台获取数据,为一个数组,里面包含多个对象。

    resultType="com.entity.scholarshipTypeUser">

    select first.id, first.type, second.amount

    from scholarshipType first,scholarshipType second

    where

    first.type = second.type

    采用了自身连接,将type与amount对应起来,形成对象,一个数组,发送到前端。

    返回值:[{"id":1,"type":"学院级","amount":2000},{"id":2,"type":"学校级","amount":3000},{"id":3,"type":"国家级","amount":5000},{"id":4,"type":"国家励志级","amount":8000}]

    2.在获取到数据之后,先给type赋值

    在type中,item in types,由于获取到了types数据,所以在type的select选择框中是有数据的。

    3.此时实现在点击select选择框中的选项时,amount中的数据会相应变化。

    由于返回的是types数据,所以type中可以获取到值,但是amount中获取不到,没有明确赋值。

    循环types数组,当select中选中时,判断每一项中是否有相等的,若是相等,将该项的amount值赋给amount的input输入框中。

    此时,即实现了后台获取数据,select联动效果。

    注意:

    1.在select的循环选择框中,@on-change返回的是value,是选中项的值(:value="item.type")。与this.formValidate.type值一致。

    若是使用elelment-ui框架的话,则为@change="selectType",使用方法与iview的一致。

    2.不能在this中使用this,不然会获取不到,可以先定义一下:const _this = this;

    3.v-model表单绑定:绑定的是输入框中的值。联动效果,也可以是两个select选择框。

    展开全文
  • tableSelect联动选择框

    2021-03-03 19:25:56
    实现效果 代码 活动名称: 奖品: // 加载tableSelect layui.config({ base: 'layui-v2.5.6/layui/lay/modules/' //假设这是test.js所在的目录 可以把你需要扩展的js插件都放在一个文件夹内 }).extend({ //设定...
    1. 实现效果
      测试
    2. 代码
      <form class="layui-form">
      		<div class="layui-form-item">
      			<div class="layui-inline">
      				<label class="layui-form-label">活动名称:</label>
      				<div class="layui-input-inline">
      					<input type="text" id="activityName" readonly="readonly" />
      					<input type="text" id="activityId" />
      				</div>
      			</div>
      			<div class="layui-inline" id="activityDiv">
      				<label class="layui-form-label">奖品:</label>
      				<div class="layui-input-inline">
      					<input type="text" id="awardName" readonly="readonly" />
      					<input type="text" id="awardId" readonly="readonly" />
      				</div>
      			</div>
      		</div>
      	</form>
      
      // 加载tableSelect
      	layui.config({
      		base: 'layui-v2.5.6/layui/lay/modules/' //假设这是test.js所在的目录   可以把你需要扩展的js插件都放在一个文件夹内
      	}).extend({ //设定组件别名
      		tableSelect: 'tableSelect'
      	});
      	layui.use(['tableSelect'], function() {
      		var table = layui.table,
      			layer = layui.layer,
      			laydate = layui.laydate,
      			tableSelect = layui.tableSelect,
      			form = layui.form, //form表单
      			$ = layui.$;
      		$(function() {
      			tableSelect.render({
      				elem: '#activityName', //定义输入框input对象
      				checkedKey: 'id', //表格的唯一建值,非常重要,影响到选中状态 必填
      				searchKey: 'activityName', //搜索输入框的name值 默认keyword
      				searchPlaceholder: '活动名称搜索', //搜索输入框的提示文字 默认关键词搜索
      				table: { //定义表格参数,与LAYUI的TABLE模块一致,只是无需再定义表格elem
      					url: 'http://localhost:8080/activityList',
      					// where:keyword
      					cols: [
      						[{
      								type: 'radio'
      							},
      							{
      								title: '活动名称',
      								field: 'name',
      								align:'center'
      							}
      						]
      					]
      				},
      				done: function(elem, data) {
      					//监听活动选择加载奖品列表
      					//活动id
      					var id = data.data[0].id;
      					var name = data.data[0].name;
      					// $("#activityDiv").show();
      					$("#activityId").val(id);
      					$("#activityName").val(name);
      					tableSelect.render({
      							elem: '#awardName', //定义输入框input对象
      							checkedKey: 'id', //表格的唯一建值,非常重要,影响到选中状态 必填
      							searchKey: 'awardName', //搜索输入框的name值 默认keyword
      							searchPlaceholder: '奖品名称搜索', //搜索输入框的提示文字 默认关键词搜索
      							table: { //定义表格参数,与LAYUI的TABLE模块一致,只是无需再定义表格elem
      								url: 'http://localhost:8080/awardList',
      								where: {
      									"activityId": $("#activityId").val()
      								},
      								cols: [
      									[{
      											type: 'radio'
      										},
      										{
      											title: '奖品名称',
      											align:'center',
      											field: 'name'
      										}
      									]
      								]
      							},
      							done: function(elem, data) {
      								//活动id
      								var id = data.data[0].id;
      								var name = data.data[0].name;
      								$("#awardId").val(id);
      								$("#awardName").val(name);
      							}
      						});
      				}
      			});
      		});
      	});
      
    3. 遇到的问题

      在奖品搜索时,出现不把原有的where条件传过去(layui-v2.4.3出现这种情况,layui-v2.5.6未出现这种情况)
    4. 解决方法(出处)
      修改tableSelect源码,在提交表单时添加where条件
      form.on('submit(tableSelect_btn_search)', function (data) {
                  $.each(tableSelect_table.config.where, function (i,v) {
                      data.field[i] =v;
                  });
                  tableSelect_table.reload({
                      where: data.field,
                      page: { curr: 1 }
                  });
                  return false;
              });
      
    展开全文
  • 有两个 select框,且这俩select框是关联的,触发select1,select2里面才会有值。 但是现在的问题是这样的: 触发select1,触发select2,再触发select1,此时select2里面的值变成了上次一选中的value 值,而不会被...
  • 在开发网站时,经常会有二个或多个select下拉框联动的情况,比如省份和城市二个下拉框联动,在省份下拉框里选择不同的省,第二个下拉框城市就要对应该省份下的城市数据。下面一起来看下,怎么用Javascript生成这样的...

    在开发网站时,经常会有二个或多个select下拉框联动的情况,比如省份和城市二个下拉框联动,在省份下拉框里选择不同的省,第二个下拉框城市就要对应该省份下的城市数据。

    下面一起来看下,怎么用Javascript生成这样的联动下拉框。

    01、首先,看下我们定义的二个数组的数据,一个arr_class,是班级数据(每条数据包括班级id和班级名称)

    另一个是arr_stu,是学生数据(每条数据包括学生id,所属班级,学生名称)。

    我们例子做的是班级和学生的二个下拉框的联动。

    frc-b83f3edb1e92b8ff9304530836423069.jpg

    02、我们的初始Html代码,是二个空的select下拉框控件。

    按这样的代码运行,是没有数据的二个下拉框。

    frc-5e922cac98720a013c631ca0ad4e142a.jpg

    frc-ae5e12fbf5af553b3df9964a0cefa80b.jpg

    03、添加JS逻辑,为二个下拉框生成初始数据,我们先写一个方法,general_select_1,为第一个下拉框填充数据。

    代码如图,主要是循环arr_class数组,用数组的每一项来生成一个下拉选项,然后用Jquery的append方法,加到第一个下拉框里,

    frc-c112136e62f734a6d03bfdf6f8a937e5.jpg

    04、再写一个方法general_select_2,为第二个下拉框填充数据,这个方法接收一个class_id的参数,根据这个参数来过滤填充的数据。比如class_id为1时,就只填充所属班级为1的学生。

    这个方法主要是循环arr_stu数组,用数组里符合class_id参数的项来生成一个下拉选项,然后用Jquery的append方法,加到第二个下拉框里,

    frc-eebf75894cf9c0e88ac2cfb8aca3246c.jpg

    05、二个方法写好,我们就可以在页面加载完时,调用这二个方法,来填充下拉框的数据,代码如下。

    general_select_1();//这个主要是填充第一个下拉框的数据

    general_select_2(0);//这个主要是填充第二个下拉框的数据,这里为什么传参数0?因为第一个下拉框里有一个‘请选择班级’的选项,这是个默认选中的选项,这个选项不是一个具体的班级,所以第二个下拉框里不应该有学生的数据。

    frc-4c2a54e0c8047bdb01c9e407c27a55fa.jpg

    06、运行后,页面上的二个下拉框都有数据了。

    frc-869261079ad2d2e465be1b5639a92009.jpg

    frc-6488f16d384d32a79dcafd8ee9c14117.jpg

    07、我们再为第一个下拉框添加事件代码,当选择一个班级时,就改变第二个下拉框的数据,填充上对应班级的学生数据。

    代码很简单,先获取到第一个下拉框选中的项的value值,即选中哪个班级,然后调用方法2,general_select_2,并把选中的班级id做参数传进去就行了,方法2就会根据这个班级的参数过滤到正确的数据后,填充到第二个下拉框里。

    varclass_id=(this).val();

    general_select_2(class_id);

    frc-ad537bc474e1d90d05e5571ee608320a.jpg

    08、刷新页面后,我们改变第一个下拉框的值,第二个下拉框的学生数据就会跟着改变,实现了二个select的联动。

    frc-243292f2b5d12131f85ade0a9f0f6295.jpg

    frc-99c727fcb1ffb9b244e4864ae8c02465.jpg

    frc-32c3e30471fc1ff4d111dad4042e30fd.jpg

    展开全文
  • Vue实现两个 select 联动

    千次阅读 2020-12-17 22:30:40
    任务: 第一个select为省份 第二个select为对应省份的城市 改变省份 对应的城市一会改变 如图: 实现: 动态变化想道用v-model绑定 , 但是如果绑定数据点击城市后,不会改变旧值,所以要绑定计算属性。 <!...
  • vue两级select联动+input赋值+select选项清空 功能描述 根据select1的选项改变select2的选项,同时 根据select2的选项给input上的时间附上对应的值,当select1清空时将select2和input的值也进行清空 Java传输数据 id...
  • NULL 博文链接:https://yuan903-gmail-com.iteye.com/blog/424507
  • JSP+AJAX实现两级select联动 代码

    热门讨论 2009-11-05 20:33:44
    个人制作的一个select联动菜单,效果还不错,代码很简单,select内容均从mysql数据库中取出的!
  • 下面小编就为大家分享一篇js实现HTML中Select二级联动的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 内容索引:ASP源码,Ajax相关,Ajax,二级联动 Asp+Ajax二级联动Select下拉列表框示例,使用时才加载菜单数据,省得一上子把数据加载完再显示网页,这样做会提升网页加载速度。实现原理:创建一个XMLHttp实例,return...
  • layui的select联动

    万次阅读 2017-12-18 17:07:53
    要实现联动效果注意两点: 第一要可以监听到select的change事件; 第二异步加载的内容,需要重新渲染后才可以 正常使用。 html结构: 所在省份:  请选择省份   ${provincelist.fullname} ...
  • 两个el-select联动,当第一个change的时候,清空第二个的值以及清空第二个的下拉框的数据源,但是清空之后发现,第二个el-select再也无法选择下拉数据,选择没有效果 解决方案1: 先判断再清空 async select1Change...
  • vue + element-ui select 联动清除方法 问题描述 表单提交时会有相互关联的下拉框,例如:我选择了一级部门A,那么子部门的选项就只能是一级部门A下面的子部门,当我选好了所有部门后,又想更改的话,那么在我切换一...
  • 根据JSON自动生成select联动,三级联动,二级联动,通过JSON自动联动,select
  • 1、在实用地方放入下面代码(有什么规律自己观察...select('project_id','所属项目')->options(Project::all()->pluck('name','id')) ->load('activity_id', 'activityList'); $form->select('activit...
  • <... <head> <script type="text/javascript"> var regions = {} var tableHeader = ["name", "sex"] var tableData = [["lize", "male"], ["lixin", "female"]] ... regions = {"HONEKONG": ["a1", "a2"],...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,331
精华内容 10,532
关键字:

select联动

友情链接: 升压斩波.rar