layui select 下拉框监听值变化值回显

最新推荐文章于 2023-08-28 13:44:53 发布

原创最新推荐文章于 2023-08-28 13:44:53 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #html

layui 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一个前端功能实现的案例，当【院区】选择值变化时，通过onchange事件动态更新【任务】下拉框的选项。利用jQuery获取和设置值，根据不同的【院区】选择，【任务】下拉框显示对应的值。同时展示了如何使用JavaScript进行值回显，例如在`controlType`下拉框中根据数据回显选中项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，效果图

在这里插入图片描述

2，功能说明

【院区】控件的值发生改变，【任务】控件的下拉框值的范围也随之改变

3，知识点

注意：这种select的控件监测只针对form模块元素
在这里插入图片描述

4，非form模块元素的select值监控触发

使用onchange监听【院区】控件值的变化，

如果【院区】控件选择值为 1，则【任务】控件下拉值为 1，2，3
如果【院区】控件选择值为 A，则【任务】控件下拉值为 A，B，C


 <label style="margin-left: 10px;">院区 </label>
 <select name="courtyard" id="courtyard"  data-options="multiple:false" onchange="refrashTask()">
	<option value="1">1</option>
    <option value="A">A</option>
 </select>


 <label style="margin-left: 10px;" >任务</label>
 <select name="taskcode" id="taskcode"  style="width: 240px;height: 25px" >
     <option value=""></option>
 </select>


 function refrashTask() {
        // alert("yes")
       var postdata ={
           courtyard:$("#courtyard").val(),
       }
       $.getJSON("/**/gettask",postdata,function(data){
           if (data.success) {
               var list= data.tasklist;
               var nr= '<option value=""></option>';
               if(list){

                   for(var i = 0; i < list.length; i++) {
                       if((list[i].id=='${taskcode}'&&'${taskcode}'!='')
                           ||(i==0&&'${taskcode}'=='') ){
                           nr += "<option selected value='" + list[i].id + "'>" + list[i].taskname + "</option>"
                       }else{
                           nr += "<option value='" + list[i].id + "'>" + list[i].taskname + "</option>"
                       }
                   };
               }
               $("#taskcode").html(nr);
           }
       },true);
 }

5，下拉框，值回显


  $("#controlType option[value='${data.controltype}']").attr("selected", "selected");
  
  <select  id="controlType"  name="controltype" class="bi-width140  form-control ">
     <option value="文本控件" >文本控件</option>
     <option value="图片框" >图片框</option>
  </select>