精华内容
下载资源
问答
  • 下拉框筛选
  • jQuery基于vue.js下拉框菜单选择和日期时间选择代码,日期时间选择有多种效果,并获取值显示在下方文本框内。
  • select超出一定长度则变成省略号
  • JS下拉框去掉重复值

    千次阅读 2019-08-16 10:37:23
    JS: $.get('/Huitubeccount/Expenses/SelectBrokerage', function (data) {//获取控制器方法名称 $("#HandleID").empty();//去重复 console.log(data);//输出 $.each(data, function (a) {//遍历 var str = ' [a...
    控制器
    public ActionResult SelectBrokerage()
            {
                var listBrokerage = (from tbBrokerage in mysql.FQ_Brokerage
                                     select new
                                     {
                                         tbBrokerage.HandleID,
                                         tbBrokerage.HandleName,
                                     }).ToList();
                return Json(listBrokerage, JsonRequestBehavior.AllowGet);
            }
    
    HTML
    <select class="IncomeAreaSelect" id="HandleID">
       <option value="0">---请选择---</option>
    </select>
    
    JS:
    $.get('/Huitubeccount/Expenses/SelectBrokerage', function (data) {//获取控制器方法名称
        $("#HandleID").empty();//去重复
        console.log(data);//输出
        $.each(data, function (a) {//遍历
            var str = ' <option value="' + data[a].HandleID + '">' + data[a].HandleName + '</option>'
            $("#HandleID").append(str);
        })
    })
    

    $("#HandleID").empty();//遍历前加上这行去掉重复值的代码

    效果前
    在这里插入图片描述
    效果后
    在这里插入图片描述

    展开全文
  • JavaScript 下拉框联动 案例

    千次阅读 2019-04-18 19:30:56
    页面上有两个下拉框,左边显示国家,右边显示城市,左边发生变化的时候,右边下拉选择内容同时发生变化,实现联动效果。 分析 HTML页面<select id="country" style="width: 100px;" onchange="add1(this....

    功能描述

    页面上有两个下拉框,左边显示国家,右边显示城市,左边发生变化的时候,右边下拉选择内容同时发生变化,实现联动效果。
    在这里插入图片描述

    分析

    • HTML页面:第一个select标签绑定事件,在改变时触发事件。使用onchange。调用方法add1(value),value表示当前改变的option的值。
      <select id="country" style="width: 100px;" onchange="add1(this.value);">
      	<option value="0">--请选择--</option>
      	<option value="1">中国</option>
      	<option value="2">美国</option>
      	<option value="3">日本</option>
      </select>
      <select id="city" style="width: 100px;" >
      	<option value="0">--请选择--</option>
      </select>
      
    • 创建一个二维数组,存储数据
      var arr = new Array(3);
      	arr[0] = [" ", "--请选择--"];
      	arr[1] = ["中国", "南京", "北京", "济南", "青岛"];
      	arr[2] = ["休斯顿", "俄克拉马托", "费城", "底特律", "纽约"];
      	arr[3] = ["日本", "东京", "大阪", "长崎", "广岛"];
      
    • 查找二维数组中相应的列,得到的也是一个数组。
      得到id为city的select对象。
      在第二个select标签中添加构造好的option。
      function add1(val) {
      	remove1();
      	for(var i = 1; i < arr[val].length; i++) {
      		var option1 = document.createElement("option");
      		var text1 = document.createTextNode(arr[val][i]);
      		option1.appendChild(text1);
      		citysel.appendChild(option1);
      	}
      }
      
    • 每一次在添加的时候都是追加子节点操作,所以在切换的时候要把旧的option的清空一下,定义一个方法,调用方法即可。
      function remove1() {
      	var options = citysel.getElementsByTagName("option");
      	for(var i = 0; i < options.length; i++) {
      		citysel.removeChild(options[i]);
      		i--;
      	}
      }
      

    代码

    <body>
    	<select id="country" style="width: 100px;" onchange="add1(this.value);">
    		<option value="0">--请选择--</option>
    		<option value="1">中国</option>
    		<option value="2">美国</option>
    		<option value="3">日本</option>
    	</select>
    	<select id="city" style="width: 100px;" >
    		<option value="0">--请选择--</option>
    	</select>
    
    </body>
    
    <script type="text/javascript">
    	var arr = new Array(3);
    	arr[0] = [" ", "--请选择--"];
    	arr[1] = ["中国", "南京", "北京", "济南", "青岛"];
    	arr[2] = ["休斯顿", "俄克拉马托", "费城", "底特律", "纽约"];
    	arr[3] = ["日本", "东京", "大阪", "长崎", "广岛"];
    
    	var citysel = document.getElementById("city");
    
    	function remove1() {
    		var options = citysel.getElementsByTagName("option");
    		for(var i = 0; i < options.length; i++) {
    			citysel.removeChild(options[i]);
    			i--;
    		}
    	}
    
    	function add1(val) {
    		remove1();
    		for(var i = 1; i < arr[val].length; i++) {
    			var option1 = document.createElement("option");
    			var text1 = document.createTextNode(arr[val][i]);
    			option1.appendChild(text1);
    			citysel.appendChild(option1);
    		}
    	}
    </script>
    
    展开全文
  • JS 下拉框 显示隐藏

    2020-06-02 11:20:48
    $(document).ready(function(){ var member_id = "<?=Yii::$app->user->id;?>"; //用户身份 var localStorageControl = "User:" + member_id + ":Control";... var obj=JSON.parse(localStorage....

    在这里插入图片描述

    $(document).ready(function(){
            var member_id = "<?=Yii::$app->user->id;?>"; //用户身份
    		var localStorageControl = "User:" + member_id + ":Control"; //防止撞库
    		var obj=JSON.parse(localStorage.getItem(localStorageControl));
    		$.each(obj,function(x,y){
    			var LabelTemp  = obj[x];
    			var Obj =  $("ul[data-lfl='"+LabelTemp+"']");
    			Obj.children('li').show('1000');
    		})
    	});
    
    	$(".list-ul").on("click",function(){
    		var This = $(this); //当前对象
    		var uniap = This.data('lfl'); //当前点击类型唯一编码
    		var member_id = "<?=Yii::$app->user->id;?>"; //用户身份
    		var localStorageControl = "User:" + member_id + ":Control"; //防止撞库
    		var OBJ = {}; //对象存储
    		var Visible =  0; //库准确数量
    
    		if (This.children('li').is(":visible")) { //检测是否显示
    			This.children('li').hide('1000'); 
    		}else{
    			This.children('li').show('1000');
    		}
    		var LI = $(".list-ul"); //当前集群
    
    		localStorage.setItem("control", "Smith");
    		for (var i = 0; i <= LI.length - 1; i++) {
    			if ($(LI[i]).children('li').is(":visible")) {
    				
    				OBJ[Visible] =$(LI[i]).data('lfl');//OBJ
    				Visible++;
    
    			};
    
    		};
    		var obj = JSON.stringify(OBJ); //转化为JSON字符串
    		localStorage.removeItem(localStorageControl); //清空
    		localStorage.setItem(localStorageControl, obj); //存储
    		Visible = 0;
    		OBJ.length = 0; //清空
    		// console.info(OBJ);
    		// console.log(uniap);
    
    	})
    
    展开全文
  • 主要为大家详细介绍了JS Select下拉框的相关资料,支持输入模糊查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了js实现下拉框选择要显示图片的方法,涉及针对js操作select的技巧,非常具有实用价值,需要的朋友可以参考下
  • js下拉框选择年月日代码
  • 介绍了JS下拉框内容左右移动效果的具体实现方法,有需要的朋友可以参考一下
  • NULL 博文链接:https://shirleyit.iteye.com/blog/718633
  • 本文实例讲述了js实现select下拉框菜单的详细代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title></title> <...
  • Javascript下拉框

    2014-03-07 10:39:59
    Javacript生成下拉框,动态操作select和option
  • 介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下
  • 一款简单实用的js下拉框三级联动菜单选择代码,这里的省市区数据是示例,不是完整的。
  • 主要为大家详细介绍了js实现下拉框二级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 菜鸟教程(runoob.com)div{display:none;}内部通知实验项目作者成员:作者成员:上限日期:进入查看:...select.onchange = function(){var options = select.getElementsByTagName("optio...
    菜鸟教程(runoob.com)

    div{display:none;}

    内部通知

    实验项目

    作者成员:

    作者成员:

    上限日期:

    进入查看:

    www.baidu.com

    var select = document.getElementById("select1");

    select.onchange = function(){

    var options = select.getElementsByTagName("option");

    for(var i = 0; i < options.length; i++){

    if(options[i].selected){

    var divid = options[i].id.replace("option","div");

    var divs = document.getElementsByTagName("div");

    for(var j = 0; j < divs.length; j++){

    if(divid == divs[j].id){

    divs[j].style.display = "block";

    }else{

    divs[j].style.display = "none";

    }

    }

    }

    }

    }

    e834d7ffc98bda458b18ef7b3a5eabcf.png

    4a340db2f4f92b3eda41eff698c4e732.png

    展开全文
  • 想要实现的效果: ...JS内容 //移除 $("#test option:selected").remove(); //增加 $('#test').append("<option value=" + value + ">" + text + "</option>"); 进阶版,当下拉框中存在
  • js下拉框

    2019-10-05 14:08:37
    Js下拉框 http://sc.chinaz.com/tag_jiaoben/XiaLaKuang.html 转载于:https://www.cnblogs.com/coding4/p/6172103.html
  • js下拉框实现多选展示

    千次阅读 2020-04-17 14:56:19
    $.ajax({ url:'<?= $getThirdList?>', dataType : 'json', data:{sid:sid}, success:function(data){ if(data.status == 1){ ...
  • 下拉框显示当前日期的代码,前提是年份里面要包含当前年份的代码,否则不能运行。
  • js下拉框添加值

    2020-03-08 12:22:59
    以下为Javascript代码 》》》》 function addProfession(){ var addText=document.getElementById(“inputTxt”); //通过id获取文本框元素 var addItem=document.createElement(“option”); //创建一个option元素 ...
  • 一般用于用户选择头像或选择性别的需要
  • 主要介绍了js实现下拉列表选中某个值的方法,涉及JavaScript针对select下拉列表选择操作的相关技巧,需要的朋友可以参考下
  • 本文实例为大家分享了可输入可选择的select下拉框,供大家参考,具体内容如下 1、原理: 1.1将input输入框和select框合并在一起,但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能 ...
  • 我本人是从事前端开发的技术人员,下拉框是我们应用的比较多的页面元素,今天我结合实际工作中遇到的问题说一下关于下拉框注册事件的一些例子,希望对大家有所帮助。 代码如下:  <select name=”” id=”sel”&...
  • 主要为大家详细介绍了js实现到搜索的下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了JavaScript实现单击下拉框选择直接跳转页面的方法,涉及javascript控制页面跳转的相关技巧,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 62,502
精华内容 25,000
关键字:

js下拉框