<!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. SIMD数据并行（四）——三种结构的比较

    在计算机体系中,数据并行有两种实现路径:MIMD(Multiple Instruction Multiple Data,多指令流多数据流)和SIMD(Single Instruction Multip ...

  2. 20145202 2016-2017-2 《Java程序设计》第一周学习总结

    20145202 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 java是SUN公司推出的面相网络的编程语言. 特点:完全面向对象,与平台无关,跨平台性(例 ...

  3. [答网友问]让GridLength支持动画

    原文:[答网友问]让GridLength支持动画 [答网友问]WPF中让GridLength类型支持动画                                                 ...

  4. 创龙DSP6748的DAC例程研究

    1. 创龙DSP6748开发板驱动TL5724这个DAC,输出指定的电压值,此程序是使用 IO 口模拟 SPI 实现与 TL5724 模块的数据交互. 2. 首先是初始化PSC函数 void PSCI ...

  5. SVN脱离锁定的几种方法

    SVN经常出现被锁定而无法提交的问题,选择解锁又提示没有文件被锁定,很是头疼.这里整理了一下SVN 被锁定的几种解决方法: 1.出现这个问题后使用“清理”即"Clean up"功能 ...

  6. 数据挖掘算法：DBSCAN算法的C++实现

    (期末考试快到了,所以比较粗糙,请各位读者理解..) 一.    概念 DBSCAN是一种产生划分聚类的基于密度的聚类算法,簇的个数由算法自动地确定.低密度区域中的点被视为噪声而忽略,因此DBSCAN ...

  7. Sublime Text 3配置 Python3 开发环境

    来自 https://www.cnblogs.com/zhangqinwei/p/6886600.html Sublime Text作为一款支持多种编程语言的文本编辑神器,深受广大开发者的喜爱.通过简 ...

  8. 无缘无故出现npm 解析异常的的问题 解决方案

    npm cache clean --force try if false delete package.lock.json try again if false npm set registry ht ...

  9. POJ 3856 deltree（模拟）

    Description You have just run out of disk space and decided to delete some of your directories. Rati ...

  10. Daily Scrum02 12.05

    deadline果然是第一生产力...这学期一下子4~5个大的Project.然后截止日期都在近期.所有的组员都很辛苦!大家加油~ 这个scrum是当天过后一天补上的.因为当前负责的同学正在忙于编译大 ...