记录一次jquery下拉框使用和回显

    技术2022-07-13  83

    用的jquery,话不多说直接上代码:

    <div class="form-group"> <label class="col-sm-2 control-label">发布企业:</label> <div class="col-sm-8"> <select name="enterpriseId" id="select1" class="form-control m-b"> <option value="">请选择企业</option> </select> </div> </div>

    这里有一个下拉框,没有填充任何属性,然后在页面初始化完成事件中调用ajax,填充数据。

    $(function () { $.ajax({ url: ctx + "system/enterprise/selectDisName", type: "GET", dataType: "json", success: function (data) { for (var i = 0; i < data.result.length; i++) { var $option = $("<option></option>"); $option.attr("value", data.result[i].enterpriseId); $option.text(data.result[i].companyName); $("#select1").append($option); } } }); });

    下面介绍回显,实现思路是先将下拉框的值查询出来,然后获取所有的option的value,然后跟要回显的值进行比对,比对相同后将selected属性指向这个值。

    $(function () { $.ajax({ url: ctx + "system/enterprise/selectDisName", type: "GET", dataType: "json", success: function (data) { for (var i = 0; i < data.result.length; i++) { var $option = $("<option></option>"); $option.attr("value", data.result[i].enterpriseId); $option.text(data.result[i].companyName); $("#enterpriseId").append($option); } //拿到回显的值 var id = $("#enterpriseId2").val(), //将所有的下拉框option赋值给all_select all_select = $("#enterpriseId > option"); for (var i = 0; i < all_select.length; i++) { //循环所有的option 然后取出value值 进行比对 var svalue = all_select[i].value; if (id == svalue) { //比对相同则令这个option添加上selected属性 $("#enterpriseId option[value='" + svalue + "']").attr("selected", "selected"); } } } }); });
    Processed: 0.012, SQL: 10