jquery常用组件处理方法

淩亂°似流年 2022-05-15 05:47 221阅读 0赞

一、select:

1、从后台获取数据填充下拉框：

<select class="addressselect" id="addressselect"></select>
    
    $.post("getbigaddress", function(data) {
            var jsonarr = JSON.parse(data);
    
            for ( var i = 0; i < jsonarr.length; i++) {
                var da = new Option(jsonarr[i]);
                var addressselect = document.getElementById("addressselect");
                addressselect.options.add(da);
            }
        });

for ( var i = 1; i <= 48; i++) {
        var groupDuration = document.getElementsByClassName("groupDuration");
        for(var j=0;j<groupDuration.length;j++){
          var data = new Option(i);
          groupDuration[j].options.add(data);
        }
      }

2、获取下拉框选中的信息：

1）:var options=$("\#test option:selected");  //获取选中的项

2）:alert(options.val());   //拿到选中项的值

3）:alert(options.text());   //拿到选中项的文本

3、根据某个特定的值动态让select下的option选中：

（1、）模糊匹配：

$("\#pageSelect").find("option:contains("+currPageIndex+")").attr("selected",true);

如：

![70][]

contains 选择器选取包含指定字符串的元素。该字符串可以是直接包含在元素中的文本，或者被包含于子元素中,是一种模糊匹配。如一个select值从1到48，现在从后台传过来的为8，那么用这句话填充在下拉框中的成了48，模糊匹配会匹配最后一个找到的。

（2、）精确匹配：

var   duration =8;
     var count=$("#detailDurationSelect").get(0).options.length;
          for(var i=0;i<count;i++){
            if($("#detailDurationSelect").get(0).options[i].text == duration)  
            {
                $("#detailDurationSelect").get(0).options[i].selected = true;          
                break;  
            }  
        }

二、file类型的input：

1、清空file类型的input选中的文件：

var obj = document.getElementById("detailContentImage") ;

obj.outerHTML=obj.outerHTML;

2、图片实现预览：

![70 1][]

<div class="modal fade imgPrivewDialog" id="detailImgPreviewModal">
        <div class="modal-dialog imgDialog">
            <div class="modal-content">
                <div class="modal-header">
    				<button type="button" class="detailImgPriewClose" ><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    				
    			</div>
    			<div class="modal-body imgBody"  id="detailImgBody">
                   
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-default detailImgPriewClose" >关闭</button>
    				
    			</div>
    		</div>
    	</div>
    </div>

预览调用事件：

三、date类型的input：

![70 2][]

如图，将后台传过来的时间填充到前端，后端类型为Date时，不加处理传到前端会是时间戳，

<input type="date" id="day">
     
    var beginTime = message.beginTime;
    //将时间戳转换成日期
    beginTime = new Date(beginTime);
    var   beginYear=beginTime.getFullYear();
    var   beginMonth=dealTime(beginTime.getMonth()+1);    
    var   beginDate=dealTime(beginTime.getDate());    
    var  beginHour=dealTime(beginTime.getHours());    
    var  beginMinter=dealTime(beginTime.getMinutes()); 
    //date类型的input需要格式一致才可以赋值         
    var  beginDay = beginYear+"-"+beginMonth+"-"+beginDate;
     $("#day").val(beginDay);

[70]: /images/20220515/163c9ed8aedf4282a52482bc94d7834d.png
[70 1]: /images/20220515/5e9cc02400b74b0ab8ca4a55c37757c6.png
[70 2]: /images/20220515/f94d257c8d6041c887fd073f6e30aaeb.png