jquery常用组件处理方法

一、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);

如：

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、图片实现预览：

 <tr>
                            <td>详情图片:</td>
                            <td>
                                <input type="file" id="detailContentImage"  name="file" style="display: inline-block" onchange="contentImgChange()" accept="image/*"></td>
                                 <td>  <button id="previewDetailContentImage" class="btn btn-success dropdown-toggle">预览</button>
                                    <td>  <button id="uploadDetailContentImage" class="btn btn-success dropdown-toggle">上传</button>
                            </td>
                            </tr>
 
                            <tr><td></td>
                                <td colspan="3"  style="width: 50px;word-wrap:break-word;word-break:break-all;"><span id="showContentImgText" style="width: 50px;" ></span></td>
                          
                                    <td  style="width: 50px;word-wrap:break-word;word-break:break-all;"><span id="contentImgText" style="width: 50px;" class="imgText"></span></td>
                                   
                            </tr>

  <!--预览图片弹框开始-->
   <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">
               <!-- <img id="imgshow" src="" /> -->
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default detailImgPriewClose" >关闭</button>
				
			</div>
		</div>
	</div>
</div>
   <!--预览图片弹框结束-->

 预览调用事件：

function detailPreview(id,textId){
  $("#detailImgPreviewModal").modal("toggle");
  //远程url
  var textUrl = $("#"+textId).html();
  var src = "";
 
  try{
    var f = document.getElementById(id).files[0];
    src = window.URL.createObjectURL(f);
  }catch(err){
   //抛出异常，说明本地没有选择图片
    src = textUrl;
  }
  var imgHtml = '<img src="'+src+'"/>';
  $("#detailImgBody").html(imgHtml);
 }

三、date类型的input：

如图，将后台传过来的时间填充到前端，后端类型为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);