jQuery 让input里面的内容可以布局到页面上
<div id="selectBox"> </div>
<div class="make">
<span class="xinzeng">新增选项</span>
<span class="add">+</span><br />
<div class="hidebox none">
<input type="text" class="choose" id="choose" placeholder="添加选项" value=""/>
<div class="sure">确定</div>
</div </div>
css
.make{
margin-bottom: 20px;
}
.xinzeng{
font-size:18px;
margin-right:10px; }
.add{
font-size: 24px;
font-weight: bold;
}
#selectBox,
{
font-size: 16px;
}
.choose{
border-radius:5px;
outline: none;
width: 100%;
}
.sure{
width: 100px;
height: 30px;
font-size: 18px;
color: #FFFFFF;
text-align: center;
line-height: 30px;
background: #5C9DFF;
margin: 20px 0;
}
上面的代码 是我需要让input里面的内容在点击确定后,让input里面的内容放到selectBox盒子里面
下面是一段js
$(".add").click(function(){
$(".hidebox").css("display","block")
})
var content = $("#choose").val()
var arr=[];
var selectArr = ['A','B','C','D','E','F'];
if($("#choose").val() != ""){
arr.push(content)
var str ="";
for (var i =0; i<arr.length;i++){
if(i<=selectArr.length){
str+='
<p>
<span>${selectBox[i]}</span>
<span>${arr[i]}</span>
</p>
'
}else{
alert("选项太多了")
} }
$("#choose").val();
$("hidebox").css("display","none")
$("#selectBox").html(str);
}else{
alert("请输入内容");
$("hidebox").css("display","none")
}
jQuery 让input里面的内容可以布局到页面上的更多相关文章
- jquery 获取json文件数据,显示到jsp页面上, 或者html页面上
[{"name":"中国工商银行","code":102},{"name":"中国农业银行",&qu ...
- Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- jquery获取文本框的内容
使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn ...
- 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
[jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
- jQuery Tags Input 插件显示选择记录
利用jQuery Tags Input 插件显示选择记录 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采 ...
- python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
随机推荐
- ubuntu装好jupyter启动失败问题
::/jupyter/nbserver-.json: [Errno ] Permission denied: '/run/user/1000/jupyter/nbserver-35390.json' ...
- 再谈HTTP2性能提升之背后原理—HTTP2历史解剖
即使千辛万苦,还是把网站升级到http2了,遇坑如<phpcms v9站http升级到https加http2遇到到坑>. 因为理论相比于 HTTP 1.x ,在同时兼容 HTTP/1.1 ...
- 在深谈TCP/IP三步握手&四步挥手原理及衍生问题—长文解剖IP
如果对网络工程基础不牢,建议通读<细说OSI七层协议模型及OSI参考模型中的数据封装过程?> 下面就是TCP/IP(Transmission Control Protoco/Interne ...
- react知识总结
用于构建用户界面的 JavaScript 库 JSX语法 style let style = { color: 'r'+'ed', fontSize: '30px' } let jsx = <d ...
- ASP.NET MVC案例教程(六)
ASP.NET六 一个小难题 我们继续完善“MVC公告发布系统”,这次,我们的需求是对公告发布功能添加日志记录能力,即在发布公告前,记录一次,在公告发布成功后,再记录一次.然后还要使得其具备异常处理, ...
- Python 递归计算分数数列
C语言的课后习题 求数列:2/1,3/2,5/3,8/5,13/8,21/13,...前50项的和 数列规律: 第二项的分母是[前一项分子] 第二项的分子是[前一项分子与分母的和] from frac ...
- svn基础了解
Apache Subversion 通常被缩写成 SVN,是一个开放源代码的版本控制系统 Subversion(SVN) 是一个开源的版本控制系統, 也就是说 Subversion 管理着随时间改变的 ...
- 使用第三方jar时出现的问题
Eclipse下把jar包放到工程lib下和通过buildpath加载有什么不同(解决找不到类的中级方法) 我通过Eclipse的 User Libranry 将jar导入 Eclipse里面,编译没 ...
- 了解Linux操作系统发展阶段
一.硬件与软件发展历史 计算机由硬件和软件组成结构 二.Linux的发展史 Linux 操作系统是Unix操作系统的一种克隆系统.它诞生于1991年的10月5日(只是第一次正式向外公布的时间).以后借 ...
- iOS日期问题
由于项目需要,需要获取去设备的当前时间,组成一个字符串,比如 2018年9月15日 15点30分30秒,需要转换成字符创:180915153030. 很简单的一个需求,于是就使用了日期格式话当前时间: ...