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.入 ...
随机推荐
- Dungeon Master (广搜)
问题描述: You are trapped in a 3D dungeon and need to find the quickest way out! The dungeon is composed ...
- CentOS 7 MySQL HA之DRBD
一.DRBD简介 DRBD的全称为:Distributed ReplicatedBlock Device(DRBD)分布式块设备复制,DRBD是由内核模块和相关脚本而构成,用以构建高可用性的集群.其实 ...
- zuul 自定义路由规则
1,zuul的maven配置 <!--spring cloud 相关包--><parent> <groupId>org.springframework.boot&l ...
- logback日志丢失的情况之一
在游戏服务器上线之后,会记录很多统计日志,这些日志是第三方需要的数据,通过linux 的 rsync方式同步给第三方.日志规则 每十分钟会创建一个日志文件.然后后台有一个rsync进程,每隔十分钟向第 ...
- 2015年上海现场赛重现 (A几何, K暴力搜索)
A: 题目链接 :https://vjudge.net/contest/250823#problem/A 参考 : https://www.cnblogs.com/helenawang/p/54654 ...
- django 后端反向生成url
导入模块 from django.core.urlresolvers import reverse reverse() reverse(viewname, urlconf=None, args=Non ...
- Linux基础命令---ipcs显示进程通信
ipcs ipcs指令用来显示进程间通信状况.“-i”选项允许指定特定的资源id.将只打印有关此id的信息. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.SUS ...
- 解决SVN提交和更新代码冲突?
解决冲突有三种选择: 1.放弃自己的更新,使用svn revert(回滚),然后提交.在这种方式下不需要使用svn resolved(解决) 2.放弃自己的更新,使用别人的更新.使用最新获取的版本覆盖 ...
- was系统的远程调试
1.进入websphere页面 2.servers->server types->websphere application servers->点击Additional Proper ...
- 接触node第一步
趁着工作不忙,今天来系统记录一下安装node环境: 1.node下载地址为:https://nodejs.org/en/,检查是否安装成功:如果输出版本号,说明我们安装node环境成功:node -v ...