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>

  • 相关阅读:
    ROS_Kinetic_08 ROS的集成开发环境(IDEs)之使用Eclipse
    如何写好一份竞品运营分析报告?
    我眼中的Linux设备树(六 memory&chosen节点)
    【干货】前端开发者最常用的六款IDE
    【前端图表】echarts散点图鼠标划过散点显示信息
    【前端图表】echarts实现散点图x轴时间轴
    三分钟教你学会如何将密文解码成明文
    2018上半年GitHub上最热门的开源项目
    进阶攻略|前端完整的学习路线
    进阶攻略|前端最全的框架总结
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5382369.html
Copyright © 2011-2022 走看看