jquery 国际短信区号鼠标移上实现下拉选择

在这里插入代码片@TOC

<style>.inputDiv{width:100%;height:40px;position: relative;margin-bottom:24px;}.phone-box{display: flex;display: -ms-flex;flex-direction: row;}#selectInterBox{position: absolute;top:38px;left: 0;width:335px;height: 280px;background: #FFFFFF;box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);border-radius: 4px;z-index: 100;display: none;}#top-select-box{width:335px;height: 68px;border-bottom: 1px solid #eee;padding-top: 12px;padding-left: 30px;box-sizing: border-box;word-break: break-all;}.hot-box{display: inline-block;height: 22px;line-height: 22px;color:#333;margin-right:10px}.hot-box:hover{color: #14BCF5;}#gj-title-box{height: 28px;line-height: 28px;color:#999;padding-left: 20px;width: 100%;font-size: 12px;}.gj-item-box{padding-left:20px;padding-right: 35px;height: 32px;line-height: 32px;color: #333;font-size: 14px;display: flex;display: -ms-flex;flex-direction:row;justify-content: space-between;}.gj-item-box:hover{background: #F5F7FA;cursor: pointer;}#top-select-temp{width: 100%;height: auto;}#gj-code-list{width: 100%;height: 180px;overflow-y: auto;}.activeBtn{color:#14BCF5;}.activeItemCode{color:#14BCF5;}
</style>

                        <div class="phoneCode" id="phoneCode" onclick="changeInternaCode()" ><span id="qhCode">+86 </span><i style="float:right;margin-top:3px" class="fa fa-caret-down" id="showUpdown" aria-hidden="true"></i> <i style="float:right;margin-top:3px" class="fa fa-caret-up" id="showUpUp"  aria-hidden="true"></i> <div id="selectInterBox"><div id="top-select-box"></div><div clss="gj-content-box"><div id="gj-title-box">热门</div><div id="gj-code-list"></div></div></div></div><input type="text" id="phone" placeholder="请输入手机号码" autocomplete="off" style="width: 257px;height:38px;box-sizing: border-box;border-radius:0 3px 3px 0;"><span class="errorMsg" id="errorMsgPhone"></span></div><script>
$(document).ready(function() {var itemTitle =''//热门list循环数组selectList = [] //循环数组for (let i = 0; i < selectList.length; i++) {if(i == 0){itemTitle = '<span style="" class="hot-box activeBtn" οnclick="clickTopBtn(\''+i+'\',this)">' + selectList[i].label + '</span>';}else{itemTitle = '<span style="" class="hot-box" οnclick="clickTopBtn(\''+i+'\',this)">' + selectList[i].label + '</span>';}var tbody = $(itemTitle)tbody.appendTo('#top-select-box')}showCodeSelect(0)})
$("#phoneCode").mouseenter(function () {debugger$("#selectInterBox").css('display','block')$("#showUpdown").css('display','none')$("#showUpUp").css('display','block')
});
$("#phoneCode").mouseleave(function () {$("#selectInterBox").css('display','none')$("#showUpdown").css('display','block')$("#showUpUp").css('display','none')
});function clickTopBtn(i,obj){//点击热门...$(".hot-box").removeClass("activeBtn");$(obj).attr("class","hot-box activeBtn");selectList.map(function(obj,index){if(i ==index){gjCodeList = obj.options}})console.log('gjCodeList',gjCodeList)stopPropagation()showCodeSelect(i)
}
function showCodeSelect(index){//选中区号gjCodeList = selectList[index].optionsgjTitle = selectList[index].label$("#gj-code-list").empty();$("#gj-title-box").empty();$("#gj-title-box").html(gjTitle)for (let r = 0; r < gjCodeList.length; r++) {var pro = $("#top-select-temp").html();     var largeItem = $(pro);largeItem.find(".gj-area").eq(0).html(gjCodeList[r].label);largeItem.find(".gj-code").eq(0).html(gjCodeList[r].value);largeItem.appendTo("#gj-code-list");}if(index==0){$("#gj-code-list").find(".gj-item-box").eq(0).addClass('activeItemCode')var code = gjCodeList[0].value$('#qhCode').html(code)}
}
function chooseCode(obj){$(".gj-item-box").removeClass("activeItemCode");$(obj).attr("class","gj-item-box activeItemCode");var code =  $(obj).find(".gj-code").text()$('#qhCode').html(code)$("#selectInterBox").css('display','none')$("#showUpdown").css('display','block')$("#showUpUp").css('display','none')
}
function stopPropagation(e) {  e = e || window.event;  if(e.stopPropagation) { //W3C阻止冒泡方法  e.stopPropagation();  } else {  e.cancelBubble = true; //IE阻止冒泡方法  }
}
</script>

jquery 国际短信区号鼠标移上实现下拉选择相关推荐

Vue 框架-02-事件：点击, 双击事件,鼠标移上事件
Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({//注意代码格式//el:eleme ...
css划上去变长,Css3如何实现鼠标移上变长特效？（图文+视频）
本篇文章主要给大家介绍用css3实现鼠标移入变长效果的方法. 在前端页面设计中,css的功能是异常强大的,只要运用好它,你能实现很多网站各种精彩的动态效果.那么在之前的文章中也给大家分享介绍了一些用c ...
CSS图片阴影+鼠标移上图片放大、变形
在做图片卡片列表的时候我们经常用到图片的呼吸灯效果,实现图片的阴影效果.放大.动态展示代码: li img { display: block; width: 140px; height: 140px ...
jQuery国际电话区号选择插件intlTelInput.js
jQuery国际电话区号选择插件intlTelInput.js URL: http://www.jq22.com/jquery-info12917 jQuery世界地区三级联动 URL: http ...
鼠标悬浮鼠标移上移出事件时改变背景颜色
效果首先给一个 class="liStyle" <li class="liStyle" @mouseover="mouseover(index ...
js 隔行变色+鼠标移上换色+鼠标离开颜色恢复+鼠标点击弹出点击的是第几行是什么颜色
隔行变色: 先获取要操作的HTML标签 var oLis = document.querySelectorAll('li') 循环HTML标签 for (var i = 0; i < oLis. ...
pb graph鼠标移上显示数据_数据分析手把手入门：打造自己的股票分析系统
作者:琥珀里有波罗的海来源:数据如琥珀打造自己的股票分析系统1.前言数据分析很重要的一步是结果展示与汇报,无论是给客户还是上级.你可以选择PPT展示,也可以给出word文档展示,但是如果有一个交互式的 ...
jquery兄弟标签_js jquery获取当前元素的兄弟级上一个下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
html 获取下一个兄弟节点,js jquery获取当前元素的兄弟级上一个下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...

jquery 国际短信区号鼠标移上实现下拉选择

jquery 国际短信区号鼠标移上实现下拉选择相关推荐

最新文章

热门文章

jquery 国际短信区号 鼠标移上实现下拉选择

jquery 国际短信区号 鼠标移上实现下拉选择相关推荐

最新文章

热门文章

jquery 国际短信区号鼠标移上实现下拉选择

jquery 国际短信区号鼠标移上实现下拉选择相关推荐