javascript - 如何根据select值改变，修改input textarea标签的name？-PHP中文网问答

**如何根据select的值给name赋值
即这样**

type[dayi][grade]
type[dayi][phone]

type[dasan][grade]
type[dasan][phone]

我使用的方法 function type_change(){}不好使，
有多个分组时错乱。。。

源码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>添加数据</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
        padding-top: 20px;
    }
    .nomal-heigh {
        height: 30px;
        margin-bottom: 6px;
        font-size: 14px;
        line-height: 1.5;
        border-radius: 3px;
    }
    </style>
</head>

<body>
    <p class="container wrap">
        <form class="form-horizontal has-success" role="form" action="" method="post">
            <p id="main" class="form-group col-xs-6">
                <p class="input-group col-xs-12 nomal-heigh">
                    <span class="input-group-addon">活动</span>
                    <input type="text" class="form-control input-sm" name="name">
                </p>
                <p class="input-group col-xs-12 nomal-heigh">
                    <span class="input-group-addon">图片</span>
                    <input type="text" class="form-control input-sm" name="pic">
                </p>
                <p id="type" class="input-group col-xs-12 nomal-heigh">
                    <a class="input-group-addon" href="javascript:type_add();">添加分组+</a>
                    <p class="input-group-btn">
                        <select name="type[0][grade]" class="form-control input-sm" onchange="type_change(this.value)" style="width: auto">
                            <option value="dayi">大一</option>
                            <option value="daer">大二</option>
                            <option value="dasan">大三</option>
                            <option value="dasi">大四</option>
                        </select>
                    </p>
                    <input id="phone" type="text" name="type[0][phone]" class="form-control input-sm" title="电话">
                </p>
                <p id="info" class="input-group col-xs-12 nomal-heigh">
                    <textarea name="type[0][info]" class="form-control" rows="3" title="主题信息"></textarea>
                </p>
            </p>
            <p class="form-group col-xs-8">
                <p class="input-group col-xs-3 nomal-heigh">
                    <button type="submit" class="btn btn-success col-xs-12">提交</button>
                </p>
            </p>
        </form>
    </p>
    <script src="./js/jquery2.1.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script type="text/javascript">
    function type_add() {
        var len = $("p#type").length;
        $("#main").append($("p#type").prop("outerHTML").replace(/type\[0\]/g,"type["+len+"]")+$("p#info").prop("outerHTML").replace("type[0]","type["+len+"]"));
    }
    </script>
    <script type="text/javascript">
    function type_change(flag) {
        // alert(flag);
        // alert($("#type select").html);
        $("#type select").attr("name","type["+flag+"][grade]");
        $("#type input").attr("name","type["+flag+"][phone]");
        $("#info textarea").attr("name","type["+flag+"][info]");
    }
    </script>

</body>

</html>

<select id="select" name="type[dayi][grade]" class="form-control input-sm" style="width: auto"> <option value="dayi">大一</option> <option value="daer">大二</option> <option value="dasan">大三</option> <option value="dasi">大四</option> </select> <input id="phone" type="text" name="type[dayi][phone]" class="form-control input-sm" title="电话"> <textarea name="type[dayi][info]" class="form-control" rows="3" title="主题信息"></textarea> <script> $('#select').on('change',function(){ var key = this.value; $(this).attr('name','type['+key+'][grade]'); $('#phone').attr('name','type['+key+'][phone]') $('#info textarea').attr('name','type['+key+'][info]') }) </script>