zoukankan      html  css  js  c++  java
  • 根据select创建input并赋值

    <!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>

  • 相关阅读:
    【转】Android Web Server
    【转】Android Http Server
    一步一步教你150行代码实现简书滑动返回效果
    Android代码内存优化建议 OnTrimMemory
    Android应用Activity、Dialog、PopWindow、Toast窗口添加机制及源码分析
    Android 快速实现 ViewPager 滑动页卡切换(可用作整个 app上导航)
    阴影效果 ShadowLayout 布局实现(让控件实现立体效果)
    ViewDragHelper让你处理View拖动时,代码减半!
    Android淘宝电影日期选项卡的实现-tab 栏居中滚动
    Android开源项目分类汇总
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5382369.html
Copyright © 2011-2022 走看看