zoukankan      html  css  js  c++  java
  • 仿百度

    页面:

     <input id="txtSchool" onkeyup="SetSchoolKeyUp('txtSchool', 'selSchool', 'hidSchool');" onfocus="SetSchoolFocus('txtSchool', 'selSchool', 'hidSchool');"  class="input2"/>
     <input id="hidSchool" type="hidden" value="" />
     <select id="selSchool" class ="pa left00" onclick="SetSchoolClick('txtSchool', 'selSchool', 'hidSchool');" multiple="multiple" style="display:none" >
     </select>

    JS:

    ///textid:文本框id
    ///selectid:选择框id
    ///hideid :隐藏域id
    
    ///实时刷新
    function SetSchoolKeyUp(textId, selectId, hideId) {
        if ($("#" + textId).val() == "") {
            $("#" + hideId).val("");
            $("#" + selectId).css("display", "none");
        } else {
            GetSchool(selectId, $("#" + textId).val());
            $("#" + selectId).css("display", "block");
        }
    }
    
    ///获取焦点
    function SetSchoolFocus(textId, selectId, hideId) {
        if ($("#" + textId).val() == "") {
            $("#" + hideId).val("");
            $("#" + selectId).css("display", "none");
        } else {
            GetSchool(selectId, $("#" + textId).val());
            $("#" + selectId).css("display", "block");
        }
    }
    
    function SetSchoolClick(textId, selectId, hideId) {
        $("#" + textId).val($("#" + selectId).find("option:selected").text());
        $("#" + hideId).val($("#" + selectId).val());
        $("#" + selectId).css("display", "none");
    }
    
    
    function GetSchool(selectId, textValue) {
        $.ajax({
            type: "post",
            dataType: "json",
            contentType: "application/json",
            async: true,
            url: "/asmxs/SYS/School/School.asmx/GetSchools",
            data: '{"strWhere":"","schoolName":"' + textValue + '"}',
            success: function (e) {
                var lists = e.d;
                var select = $("#" + selectId);
                select.children().remove();
                for (var i = 0; i < lists.length; i++) {
                    var mode = lists[i];
                    select.append("<option value=" + mode.SchoolID + ">" + mode.SchoolName + "</option>");
                }
            },
            error: function (e, x) {
                alert("操作失败!");
            }
        });
    }
  • 相关阅读:
    微信小程序~事件绑定和冒泡
    为promise增加abort功能
    Object构造函数的方法 之 Object.freeze
    ES6新特性:JavaScript中内置的延迟对象Promise
    js 预编译
    什么是PWA?PWA的发展趋势
    CSS隐藏元素的方法及区别
    网页编码:UTF-8、GB2312
    Mixin 和 CSS Guards
    css自定义checkbox样式
  • 原文地址:https://www.cnblogs.com/xiaoqi742709106/p/4062123.html
Copyright © 2011-2022 走看看