在Select2下拉列表中设置选定的值

时间:2016-07-25 08:11:54

标签: jquery select2

我想设置Select2下拉列表的选定值。我正在显示两种类型的地址,其中包含地址和发票地址。每个都有以下字段:

  1. 地址1 - 文本框
  2. 地址2 - 文本框
  3. Town - 文本框
  4. country - dropdown
  5. 发票地址也包含这些相同的字段。此外,我显示一个复选框,如果单击它,我们应该将地址字段值复制到发票地址字段。 我可以复制文本框值并设置为另一个文本框。但是我无法复制下拉值并设置为另一个下拉列表。我使用了以下代码:

    $('#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>
    

    提前致谢

3 个答案:

答案 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");

现在工作正常。