首页 > 解决方案 > 使用 select2 下拉菜单在编辑表单中显示选定的选项

问题描述

我是 Codeigniter 框架的新手。使用设备的 select2 下拉菜单。使用控制器从 json_encode 中的数据库中检索记录,代码如下所示。

$data = array();
  $query = $this->db->get_where('store', array('id' => $this->input->post('id')));
    if ($query->num_rows() > 0) {
        $data = $query->row_array();
       }
     echo  json_encode($data);

设备的值存储在 1,2 等列中

问题是未使用 ajax 数据选择编辑表单选项,代码如下所示

jQuery(document).on("click", "#modify", function () {
    jQuery('#titsupplieri').html("<?php echo lang('edit').' '.lang('Store'); ?>");
    
        var num = jQuery(this).data("num");
        jQuery.ajax({
            type: "POST",
            url: base_url + "panel/settings/store/byID",
            data: "id=" + encodeURI(num) + "&token=<?php echo $_SESSION['token'];?>",
            cache: false,
            dataType: "json",
            success: function (data) {
                jQuery('#store_form input[name=name]').val(data.name);
                jQuery('#store_form input[name=address]').val(data.address);
                jQuery('#store_form input[name=email]').val(data.invoice_mail);
                jQuery('#store_form input[name=phone]').val(data.phone);
                jQuery('#store_form textarea[name=description]').val(data.description);
                jQuery('#store_form #timezone').val(data.timezone).trigger('change');
                jQuery('#store_form #devices').val(data.dealin).trigger('change');
                jQuery('#store_form #city').val(data.city);
                jQuery('#store_form #state').val(data.state);
                jQuery('#store_form #zip').val(data.zipcode);

                $(":checked").prop("checked", false);
                $.each((data.new_phone_tax).split(","), function(i,e){
                    $("#new_phone_tax_"+e).prop("checked", true);
                });
                $.each((data.used_phone_tax).split(","), function(i,e){
                    $("#used_phone_tax"+e).prop("checked", true);
                });
                $.each((data.accessories_tax).split(","), function(i,e){
                    $("#accessories_tax"+e).prop("checked", true);
                });
                $.each((data.repair_items_tax).split(","), function(i,e){
                    $("#repair_items_tax"+e).prop("checked", true);
                });
                $.each((data.other_items_tax).split(","), function(i,e){
                    $("#other_items_tax"+e).prop("checked", true);
                });
                $.each((data.plans_tax).split(","), function(i,e){
                    $("#plans_tax"+e).prop("checked", true);
                });

                $.each((data.dealin).split(","), function(i,e){
                    var optionValue  = localStorage.getItem(e);
                    alert(optionValue);
                    $("#devices").val(optionValue).find("option[value=" + optionValue +"]").prop('selected', true);
                });

                jQuery('#footersupplier1').html('<button data-dismiss="modal" class="pull-left btn btn-default" type="button"><i class="fas fa-reply"></i> <?php echo lang("go_back"); ?></button><button role="button" form="store_form" id="submit_store" class="btn btn-success" data-mode="modify" data-num="' + encodeURI(num) + '"><i class="fas fa-save"></i> <?php echo lang("save"); ?></button>')
            }
        });
    });

并选择选项代码如下

<select class="form-control select2" name="devices[]" id="devices" required="required" style="width:100%;" multiple="">
      <option value="1">Smartphone</option>
      <option value="2">Tablet</option>
      <option value="3">Laptop</option>
      <option value="4">Watch</option>
      <option value="6">Camera</option>
</select>

标签: ajaxcodeigniterjquery-select2

解决方案


推荐阅读