<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>私人定制</title>

<script type="text/javascript" src="JS/jquery-2.2.2.min.js"></script>

</head>

<body>
        <div id="wrap">
            <ul id="personal_list">
                <li>
                    <span>选择蔬菜品种：</span>
                    <select name="selectVal" id="selectVal_a">
                          <optgroup label="椒类">  
                              <option value="青椒">青椒</option>
                            <option value="二根条">二根条</option>  
                               <option value="朝天椒">朝天椒</option>  
                               <option value="红椒">红椒</option>
                          </optgroup>

</select>

</li>
                <li id="choose_list">

<span>您已经选择：</span><br/>
                </li>
                
                <li>

</ul>

<script>
                $(function() {
                    var x = 0;
                    //下拉框值发生改变会触发该事件
                    $("#selectVal_a").change(function() {
                        //获取到下拉框的值
                        var selecVal = $(this).val();
                        x++;
                        //添加文本框和删除按钮
                        $("#choose_list").append("<div id='choose_div'><span class='choose_span'style='    font-weight: 200;font-size: 16px;'>第" + x + "种蔬菜种类为:</span><input type='text' readonly='readonly' value='" + selecVal + "'></br><span class='choose_span'style='    font-weight: 200;font-size: 16px;'>重量为:</span><select><option value='1'>1kg~500kg</option><option value='2'>>500kg</option></select><button class='dele'>删除</button></div>");
                        //删除功能
                        $(".dele").click(function() {
                            //删除tr节点
                            $(this).parent().remove();
                            x--;
                            //禁止表单提交
                            return false;
                        });
                    })
                });
            </script>

</div>

</div>

</body>

</html>

根据select创建input并赋值的更多相关文章

  1. jquery select取值，赋值操作

    select">jquery select取值,赋值操作 一.获取Select 获取select 选中的 text : $("#ddlRegType").find( ...

  2. Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells

    本篇主要包括: ■  Page Header■  Breadcrumbs■  Button Groups■  Dropdowns■  Button Dropdowns■  用Button和Dropdo ...

  3. iScroll滚动区域中select、input、textarea元素无法点击的Bug修复

    最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...

  4. SqlServer中使用Select语句给变量赋值的时候需要注意的一个问题

    我们知道在SqlServer中可以用Select语句给变量赋值,比如如下语句就为int类型的变量@id赋值 ; select @id=id from ( as id union all as id u ...

  5. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  6. vue2.0结合Element实现select动态控制input禁用

    今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得 ...

  7. 闲聊select和input常用的小插件

    前言 在pc端的项目中,经常会用到表单标签,莫过于是select和input这两种,这两种相当常用.但往往原生的功能不尽人意,即使 input中type有n多属性,甚至连时间控件都有,但仍旧满足不了我 ...

  8. 给“file”类型的input框赋值的问题

    开发"新闻编辑"功能时,会遇到给"file"类型的input框赋值的问题,用来展示之前上传的文件,但由于file类型的input框受到安全限制,所以不能被赋值, ...

  9. js实现input的赋值

    input框赋值如下所示,是一个文本框的html代码,实际开发中,要涉及到将数据库中的数据取出然后放入input框中. <input id="name1" name=&quo ...

随机推荐

  1. hdu 1394 Minimum Inversion Number（线段树）

    参考:http://blog.sina.com.cn/s/blog_691ce2b70101ldmm.html https://blog.csdn.net/wiking__acm/article/de ...

  2. BZOJ：2038: [2009国家集训队]小Z的袜子(hose)（莫队算法模板）

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2038 解题心得: 第一次接触莫队算法,很神奇,很巧妙.莫队算法主要就是用来解决多次询问时 ...

  3. Hive 函数之内置运算符

    本章介绍Hive的内置运算符.在Hive有四种类型的运算符: 关系运算符 算术运算符 逻辑运算符 复杂运算符 关系运算符 这些操作符被用来比较两个操作数.下表描述了在Hive中可用的关系运算符: 运算 ...

  4. HashMap源码注释翻译

    HashMap.java(JDK1.8) 如有错误翻译的地方,欢迎评论指出. 介绍:对于HashMap及其子类而言,它们采用Hash算法来决定集合中元素的存储位置.当系统开始初始化HashMap时,系 ...

  5. ORB-SLAM 代码笔记（三）tracking原理

    ORB视觉里程计主体在tracking线程中

  6. 1、Java多线程基础：进程和线程之由来

    Java多线程基础:进程和线程之由来 在前面,已经介绍了Java的基础知识,现在我们来讨论一点稍微难一点的问题:Java并发编程.当然,Java并发编程涉及到很多方面的内容,不是一朝一夕就能够融会贯通 ...

  7. 『AngularJS』ngShow

    原文 描述 ngShow指令显示或隐藏给定的基于标明ngShow属性的HTML元素.元素的显示或隐藏通过在元素上移除或添加ng-hide CSS类属性.".ng-hide"CSS类 ...

  8. crm踩坑记(一)

    目录 antd es6 Object.entries() Object.keys() Object.getOwnPropertyNames() 很神奇的用法!!! eslint 傻逼 其他 参考 an ...

  9. 使用fiddler和jmeter进行简单的接口测试。

    初学接口测试,以下内容是记录首次使用fiddler和jmeter进行接口测试的步骤,可能步骤有点繁琐,如果有不对的地方,欢迎大家指正. 准备活动: 1.打开fiddler,打开fiddler以后会自动 ...

  10. nginx启动和配置

    1.命令行参数 -c </path/to/config> 为 Nginx 指定一个配置文件,来代替缺省的.路径应为绝对路径 -t 不运行,而仅仅测试配置文件.nginx 将检查配置文件的语 ...