项目中常用的JS操作技巧

标签：

1.<a>标签-超链接中confirm方法使用介绍

<a href="a.html" onclick="if(confirm(‘确定删除?‘)==false)return false;">删除</a>

2.<select>下拉框三级联动效果

1).html代码

<select name="select_element" id="firstServiceType"></select>
<select name="select_element" id="secondServiceType"></select>
<select name="select_element" id="thirdServiceType"></select>

2).JS代码

<script type="text/javascript">

$(document).ready(function () {
$("#code").val();
GetFirstType();
$("#firstServiceType").change(function () { $("#Type").val($(this).val()); GetSecondType() });
$("#secondServiceType").change(function () { $("#Type").val($(this).val()); GetThirdType() });
$("#thirdServiceType").change(function () { $("#Type").val($(this).val()); });
});
function GetFirstType() {
$("#firstServiceType").empty();
$("#firstServiceType").append(‘<option>请选择</option>‘);
$.getJSON("/ServiceType/GetFirstType", function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["Code"])
.text(item["AbbrName"])
.appendTo($("#firstServiceType"));
});
GetSecondType();
});
}
function GetSecondType() {
$("#secondServiceType").empty();
$("#secondServiceType").append(‘<option value="0">请选择</option>‘);
var url = "/ServiceType/GetSecondType/?code=" + $("#firstServiceType").val();

$.getJSON(url, function (data) {

$.each(data, function (i, item) {
$("<option></option>")
.val(item["Code"])
.text(item["AbbrName"])
.appendTo($("#secondServiceType"));
});
GetThirdType();
});
}
function GetThirdType() {
$("#thirdServiceType").empty();
$("#thirdServiceType").append(‘<option value="0">请选择</option>‘);
var url = "/ServiceType/GetThirdType/?code=" + $("#secondServiceType").val();
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["Code"])
.text(item["AbbrName"])
.appendTo($("#thirdServiceType"));
});

});
}
</script>

3.上传图片时预览功能

1).htm代码

<img id="img" style="width:100px; height:100px;" src=""/>

<input type="file" name="pic" id="file" />

2).JS代码

<script type="text/javascript">
$(document).ready(function () {
$("#file").bind("change", function () {
var f = document.getElementById(‘file‘).files[0];
var src = window.URL.createObjectURL(f);
$("#img").attr("src", src)；

})

});
</script>

项目中常用的JS操作技巧

标签：

原文地址：http://www.cnblogs.com/weishuanbao/p/4705028.html