zoukankan      html  css  js  c++  java
  • select下拉框默认不能选择第一个选项的问题

          如题,现在有个js的功能:用户选择下拉框的同时,把选择的下拉框显示出来。同时选择的不能有重复的。刚开始 使用的是 select的onchange事件:

         

    1 $("#liveType").on("change",function(){
    2     $("#selectedLiveType").append("<p><span class='close'>X</span><button value='"+$('#liveType option:selected').val()+"' name='selectLiveType'  onclick='removeLiveType(this)'  style='background-color:white'>"+$('#liveType option:selected').text()+"</button></p>")
    3 
    4 })

      然而这种情况下,当选择第一个的时候 ,总是没有任何的反应。于是google:得到下面的方法

      

    Element.prototype.onSelectChange = function(callback) {
    	var cached = 0;
    	this.addEventListener("click", function(event) {
    		if (cached == this) {
    			callback.call(this, event);
    			cached = 0;
    		} else {
    			cached = this;
    		}
    	});
    }
    
    var select = document.getElementById("liveType");
    select.onSelectChange(function(event) {
    	var liveTypes=new Array();
    	$("button[name='selectLiveType']").each(function () {
    		liveTypes.push($(this).val());
    	})
    	var checkArray = liveTypes.join(',');
    	if(checkArray.indexOf($('#liveType option:selected').val()) == -1){
    		$("#selectedLiveType").append("<p><span class='close'>X</span><button value='"+$('#liveType option:selected').val()+"' name='selectLiveType'  onclick='removeLiveType(this)'  style='background-color:white'>"+$('#liveType option:selected').text()+"</button></p>")
    	}
    
    });
    

      

       通过 定义一个 数组checkArray, 使用indexOf进行判断有没有重复的。ok...

       

  • 相关阅读:
    fiddler工具窗口功能介绍
    Fiddler导出jmx格式实现方法
    Fiddler抓包时一直请求:http://clients1.google.com:443
    内置函数的使用
    python中操作excel、ddt、config、logging方法
    Pycharm 将代码上传到GitHub
    unittest框架-优化一【变量参数化】
    excel的读取
    ddt数据驱动
    selenium中的js和jquery的相关用法
  • 原文地址:https://www.cnblogs.com/thinkingandworkinghard/p/7428723.html
Copyright © 2011-2022 走看看