使用jquery单击按钮时的动态，多个下拉菜单 [英] Dynamic, multiple dropdowns on button click with jquery
本文介绍了使用jquery单击按钮时的动态，多个下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经有一个下拉菜单。每按一次按钮，它会附加另一个下拉列表。但是在表格中它只显示一个下拉列表选择值。相反它应该显示所有下拉选择值。
我尝试过：
这是jquery
$（文件）.ready（function（）{
$（＃btnAdd ）.click（function（）{
var select = $（'＃DROP'）。clone（）。attr（'id'，$（'＃DROP'）。attr（'id' ））。attr（'name'，$（'＃DROP'）。attr（'name'））;
$（z）。append（select）;
}）;
}）;
这是ajax表格代码
@using（Ajax.BeginForm（Create，Home，null，new AjaxOptions {HttpMethod =Post，OnSuccess =OnSuccess，OnFailure =OnFailure}，new {@id = formid}））
{
< div class =tab-content>
< div class =tab-pane淡出活动在contid =tab_5_1>
< div class =modal-body>
< div class =row>
< div class =col-md-6>
< div class =roe>
@ Html.Label（名称）
< / div>
@ Html.TextBoxFor（m => m.Name，new {@class =text-danger form-control，@ id =Name}）
@Html。 ValidationMessageFor（m => m.Name，null，new {@class =text-danger}）
< br />
< div class =roe>
@ Html.Label（地址）
< / div>
< br />
@ Html.TextBoxFor（m => m.Address，new {@class =text-danger form-control，@ id =Address}）
@Html。 ValidationMessageFor（m => m.Address，null，new {@class =text-danger}）
< br />
< / div>
< / div>
< / div>
< div class =modal-footer>
< button href =＃tab_5_2id =changetabbuttontype =buttonclass =nexttab tab-pane active btn green enableOnInputtarget =_ blank>
下一个
< / button>
< / div>
< / div>
@ *< / div> * @
< div class =tab-pane fade contid =tab_5_2>
< div class =modal-body>
< div class =row>
< div class =col-md-6>
< input type =buttonid =btnAddclass =btn greenvalue =Add DropDownList/>
< div class =divcls>
< div class =roe>
@ Html.Label（Town）
< / div>
< br />
@ Html.TextBoxFor（m => m.Town，new {@class =text-danger form-control，@ id =Town}）
@ Html.ValidationMessageFor（m = > m.Town，null，new {@class =text-danger}）
< br />
< / div>
< z>
< div id =DROP>
@ Html.DropDownListFor（m => m.saved，new SelectList（ViewBag.emp），Select company，new {@class =form-control}）
< / DIV>
< / z>
@ *< z>
< div id =DROP>
@ Html.DropDownListFor（m => m.Name，新的SelectList（ViewBag.emp），选择公司，新的{@class =form-control}）
< / DIV>
< / z> * @
< / div>
< / div>
< div class =modal-footer>
< button type =buttondata-dismiss =modalclass =btn default>关闭< / button>
< button type =submitid =closeclass =btn greenvalue =Submit>保存更改< / button>
< / div>
< / div>
< / div>
< / div>
}
这是控制器
[HttpGet]
public ActionResult Create（）
{
var li = db.tbl_Compnay.Where（p => p.Name！= null）。选择（p => p。名称）.ToList（）;
ViewBag.emp = li;
return View（）;
}
[HttpPost]
public ActionResult Create（company companyData）
{
dynamic showMessageString = string.Empty;
尝试
{
tbl_Compnay a = new tbl_Compnay（）;
a.Name = companyData.Name;
a.Town = companyData.Town;
a.Address = companyData.Address;
a.saved = companyData.saved;
db.tbl_Compnay.Add（a）;
db.SaveChanges（）;
}
catch（exception ex）
{
var errorMsg = ex.Message.ToString（）;
showMessageString = new
{
param1 = 404，
param2 =转换用户日期时发生异常
};
}
返回Json（OnSuccess，JsonRequestBehavior.AllowGet）;
}
public JsonResult IsNameUnique（公司公司）
{
返回IsExist（Company.Name）
？ Json（true，JsonRequestBehavior.AllowGet）
：Json（false，JsonRequestBehavior.AllowGet）;
}
public bool IsExist（字符串名称）
{
var Company = db.tbl_Compnay.Where（x => x.Name == Name）。计数（）;
if（公司> 0）
{
返回false;
}
返回true;
}
解决方案
（document）.ready（function（）{
（＃btnAdd）。click（function（）{
var select =
（'＃DROP'）。克隆（）。ATTR（ 'ID'，
I have already a drop-down.on every one click button, it appends another dropdown.but in the table it shows only one dropdown selected value. Instead it should show all of dropdowns selected value.
What I have tried:
this is jquery
$(document).ready(function () {
$("#btnAdd").click(function () {
var select = $('#DROP').clone().attr('id', $('#DROP').attr('id')).attr('name', $('#DROP').attr('name'));
$("z").append(select);
});
});
this is ajax form code
@using (Ajax.BeginForm("Create", "Home", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "OnSuccess", OnFailure = "OnFailure" }, new { @id = "formid" }))
{
<div class="tab-content">
<div class="tab-pane fade active in cont" id="tab_5_1">
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="roe">
@Html.Label("Name")
</div>
@Html.TextBoxFor(m => m.Name, new { @class = "text-danger form-control", @id = "Name" })
@Html.ValidationMessageFor(m => m.Name, null, new { @class = "text-danger" })
<br />
<div class="roe">
@Html.Label("Address")
</div>
<br />
@Html.TextBoxFor(m => m.Address, new { @class = "text-danger form-control", @id = "Address" })
@Html.ValidationMessageFor(m => m.Address, null, new { @class = "text-danger" })
<br />
</div>
</div>
</div>
<div class="modal-footer">
<button href="#tab_5_2" id="changetabbutton" type="button" class="nexttab tab-pane active btn green enableOnInput " target="_blank">
Next
</button>
</div>
</div>
@*</div>*@
<div class="tab-pane fade cont " id="tab_5_2">
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<input type="button" id="btnAdd" class="btn green" value="Add DropDownList" />
<div class="divcls">
<div class="roe">
@Html.Label("Town")
</div>
<br />
@Html.TextBoxFor(m => m.Town, new { @class = "text-danger form-control", @id = "Town" })
@Html.ValidationMessageFor(m => m.Town, null, new { @class = "text-danger" })
<br />
</div>
<z>
<div id="DROP">
@Html.DropDownListFor(m => m.saved, new SelectList(ViewBag.emp), "Select company", new { @class = "form-control" })
</div>
</z>
@*<z>
<div id="DROP">
@Html.DropDownListFor(m => m.Name, new SelectList(ViewBag.emp), "Select company", new { @class = "form-control" })
</div>
</z>*@
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn default">Close</button>
<button type="submit" id="close" class="btn green" value="Submit">Save changes</button>
</div>
</div>
</div>
</div>
}
this is the controller
[HttpGet]
public ActionResult Create()
{
var li = db.tbl_Compnay.Where(p => p.Name != null).Select(p => p.Name).ToList();
ViewBag.emp = li;
return View();
}
[HttpPost]
public ActionResult Create(company companyData)
{
dynamic showMessageString = string.Empty;
try
{
tbl_Compnay a = new tbl_Compnay();
a.Name = companyData.Name;
a.Town = companyData.Town;
a.Address = companyData.Address;
a.saved= companyData.saved;
db.tbl_Compnay.Add(a);
db.SaveChanges();
}
catch (Exception ex)
{
var errorMsg = ex.Message.ToString();
showMessageString = new
{
param1 = 404,
param2 = "Exception occured while converting user date"
};
}
return Json("OnSuccess", JsonRequestBehavior.AllowGet);
}
public JsonResult IsNameUnique(company Company)
{
return IsExist(Company.Name)
? Json(true, JsonRequestBehavior.AllowGet)
: Json(false, JsonRequestBehavior.AllowGet);
}
public bool IsExist(string Name )
{
var Company = db.tbl_Compnay.Where(x => x.Name == Name).Count();
if (Company > 0 )
{
return false;
}
return true;
}
解决方案
(document).ready(function () {
("#btnAdd").click(function () { var select =
('#DROP').clone().attr('id',
这篇关于使用jquery单击按钮时的动态，多个下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
