我想设置Select2下拉列表的选定值。我正在显示两种类型的地址,其中包含地址和发票地址。每个都有以下字段:
发票地址也包含这些相同的字段。此外,我显示一个复选框,如果单击它,我们应该将地址字段值复制到发票地址字段。 我可以复制文本框值并设置为另一个文本框。但是我无法复制下拉值并设置为另一个下拉列表。我使用了以下代码:
$('#invoiceAddress').on('ifChecked', function (event) {
$('input[data-cg-address]').each(function (index, element) {
var fieldname = $(this).data('cg-address');
var fieldvalue = $(this).val();
$('#invoice-address').find('input[data-invoice-address="' + fieldname + '"]').val(fieldvalue);
});
$('select[data-cg-address]').each(function (index, element) {
var fieldname = $(this).data('cg-address');
var selectedValue = $(this).val();
$('#invoice-address').find('select[data-invoice-address="' + fieldname + '"]').val(selectedValue);
});
});
如果是正常下拉列表,此代码正常工作。它不适用于Select2下拉列表。
我在更多页面上使用了这段代码。所以我可以使用那些下拉菜单的ID。 我需要编写通用代码。以下是表格字段。
<div class="panel">
<div class="panel-header">
<h3><i class="icon-bulb"></i> Address Details</h3>
</div>
<div id="cg-address" class="panel-content">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupAddress.Address1)</label>
@Html.TextBoxFor(x => x.CompanyGroupAddress.Address1, new { @class = "form-control", data_cg_address = "address1" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupAddress.Address1)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupAddress.Address2)</label>
@Html.TextBoxFor(x => x.CompanyGroupAddress.Address2, new { @class = "form-control", data_cg_address = "address2" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupAddress.Address2)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupAddress.Town)</label>
@Html.TextBoxFor(x => x.CompanyGroupAddress.Town, new { @class = "form-control", data_cg_address = "town" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupAddress.Town)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupAddress.Address4)</label>
@Html.TextBoxFor(x => x.CompanyGroupAddress.Address4, new { @class = "form-control", data_cg_address = "address4" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupAddress.Address4)
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupAddress.Postcode)</label>
@Html.TextBoxFor(x => x.CompanyGroupAddress.Postcode, new { @class = "form-control", data_cg_address = "postcode" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupAddress.Postcode)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupAddress.CountyId)</label>
@Html.DropDownListFor(x => x.CompanyGroupAddress.CountyId, new SelectList(Model.Counties, "Key", "Value"), "Select Company County", new { @class = "form-control", data_cg_address = "countyid" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupAddress.CountyId)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupAddress.CountryId)</label>
@Html.DropDownListFor(x => x.CompanyGroupAddress.CountryId, new SelectList(Model.Countries, "Key", "Value"), "Select Company Country", new { @class = "form-control", data_cg_address = "countryid" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupAddress.CountryId)
</div>
</div>
</div>
</div>
</div>
</div>
<div id="invoice-address" class="panel">
<div class="panel-header">
<h3><i class="icon-bulb"></i>Invoice Address Details</h3>
</div>
<div class="panel-content">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>
@Html.CheckBoxFor(x => x.InvoiceAddress, new { @id = "invoiceAddress", @for = "invoiceAddress", @class = "m-t-10" })
Same as Company Address
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupInvoiceAddress.Address1)</label>
@Html.TextBoxFor(x => x.CompanyGroupInvoiceAddress.Address1, new { @class = "form-control", data_invoice_address = "address1" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupInvoiceAddress.Address1)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupInvoiceAddress.Address2)</label>
@Html.TextBoxFor(x => x.CompanyGroupInvoiceAddress.Address2, new { @class = "form-control", data_invoice_address = "address2" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupInvoiceAddress.Address2)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupInvoiceAddress.Town)</label>
@Html.TextBoxFor(x => x.CompanyGroupInvoiceAddress.Town, new { @class = "form-control", data_invoice_address = "town" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupInvoiceAddress.Town)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupInvoiceAddress.Address4)</label>
@Html.TextBoxFor(x => x.CompanyGroupInvoiceAddress.Address4, new { @class = "form-control", data_invoice_address = "address4" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupInvoiceAddress.Address4)
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupInvoiceAddress.Postcode)</label>
@Html.TextBoxFor(x => x.CompanyGroupInvoiceAddress.Postcode, new { @class = "form-control", data_invoice_address = "postcode" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupInvoiceAddress.Postcode)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupInvoiceAddress.CountyId)</label>
@Html.DropDownListFor(x => x.CompanyGroupInvoiceAddress.CountyId, new SelectList(Model.Counties, "Key", "Value"), "Select Company County", new { @class = "form-control", data_invoice_address = "countyid" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupInvoiceAddress.CountyId)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>@Html.DisplayNameFor(x => x.CompanyGroupInvoiceAddress.CountryId)</label>
@Html.DropDownListFor(x => x.CompanyGroupInvoiceAddress.CountryId, new SelectList(Model.Countries, "Key", "Value"), "Select Company Country", new { @class = "form-control", data_invoice_address = "countryid" })
<div class="form-error">
@Html.ValidationMessageFor(x => x.CompanyGroupInvoiceAddress.CountryId)
</div>
</div>
</div>
</div>
</div>
</div>
提前致谢
答案 0 :(得分:0)
试试这个:
$('#checkbox').click(function(){
var dropdown1 = $('#dropdown1').val();
$('#dropdown2').val(dropdown1);
});
答案 1 :(得分:0)
$("#chkbox").click(function () {
var options = $('#ddl1 option').clone();
$('#ddl2').append(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chkbox" />
<select id="ddl1">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select id="ddl2">
答案 2 :(得分:0)
我刚刚在下拉列表设置值中添加了触发器中的代码(&#39;更改&#39;),如下所示。
$('#invoice-address').find('select[data-invoice-address="' + fieldname + '"]').val(selectedValue).trigger("change");
现在工作正常。