zoukankan      html  css  js  c++  java
  • 项目中常用的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="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>

  • 相关阅读:
    html5--4-1 video/视频播放
    html5--3.22 综合实例03
    html5--3.21 课程小结与其他新增元素
    html5--3.20 新增的keygen元素
    UVA11324-- The Largest Clique(SCC+DP)
    memset函数具体说明
    XMPP协议的原理介绍
    探索WebKit内核(一)------ 菜鸟起步
    图像切割之(一)概述
    LeetCode——Count and Say
  • 原文地址:https://www.cnblogs.com/CeleryCabbage/p/4705028.html
Copyright © 2011-2022 走看看