<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项</title> <script type="text/javascript" src="http://js.tgimg.cn/jquery/base/jquery.min.js"></script> <script> $(function () { //$("input[name=detailUrl]").blur(function () { // console.log(1111); //}) //後面添加的元素無法綁定事件，需預加載 $("#dfd").on("blur", "input[name=detailUrl]", function () { var url = $(this).val() }); $('#modify_bt').on('click', function () { alert($("input[name=detailUrl]").length); var detailUrl = $("input[name=detailUrl]"); var arrDetailUrl = []; console.log(arrDetailUrl.join(',')); detailUrl.each(function () { arrDetailUrl.push($(this).val()); }) console.log(arrDetailUrl.join(',')); }); // 添加选项 $("#opbtn").click(function () { if ($("#opts>li").size() < 6) {// 最多添加6个选项 $("#opts").append("<li><input /></li>"); } else {// 提示选项个数已经达到最大 $("#optips").html("选项个数已经达到最大,不能再添加!"); $("#optips").css({ "color": "red" }); } }); $("#opbtn1").click(function () { if ($("input[name=appendDetailUrl]").size() < 6) {// 最多添加6个选项 $("#appendDetailUrl").before("<div class='col-sm-4'><input class='form-control' id='detailUrl' name='detailUrl' type='text' placeholder='具体网址' /></div>"); } else {// 提示选项个数已经达到最大 $("#optips").html("选项个数已经达到最大,不能再添加!"); $("#optips").css({ "color": "red" }); } }); // 删除选项 $("#delbtn").click(function () { if ($("#opts>li").size() <= 0) { $("#optips").html("已经没有选项可以删除了!"); $("#optips").css({ "color": "red" }); } else { // 删除选项,每次删除最后一个 $("#opts>li").last().remove(); } }); }); </script> <style> * { margin: 0px; padding: 0px; } #dv { width: 100px; height: 100px; background-color: yellow; margin: 0px auto 0px; } </style> </head> <body> <div style="margin: 50px;"> <input id="opbtn" type="button" value="添加选项" /> <input id="opbtn1" type="button" value="添加选项" /> <input id="delbtn" type="button" value="删除选项" /> <input id="wrapbtn" type="button" value="包围DIV" /> <ol id="opts" type="A"></ol> <!-- 提示语 --> <span id="optips"></span> </div> <div class="form-group" id="dfd"> <label class="col-sm-2 control-label" for="detailUrl">具体网址</label> <div class="col-sm-4"> <input class="form-control" id="detailUrl" name="detailUrl" type="text" placeholder="具体网址" /> </div> <input type="button" class="btn" value="追加具体网址" id="appendDetailUrl" /> </div> <div class="form-group"> <div class="col-sm-offset-8 col-sm-5"> <input type="button" class="btn" value="保存" id="modify_bt" /> </div> </div> </body>