如何让下拉菜单显示客户当前类型状态

Question

这是 select box/drop-down 菜单：

 var type_select = '<select id="type_select" style="margin-bottom:0px;">';
          var i;
          var customer_group = <?php echo json_encode($customer_group);?>;
          for (i = 0; i < customer_group.length; ++i) {
            //console.log(customer_group[i].group_id);
            if (customer_group[i].group_name == table_column_3){
              type_select = type_select+'<option value='+customer_group[i].group_id+' selected="selected">'+customer_group[i].group_name+'</option>';
            }else{
              type_select = type_select+'<option value='+customer_group[i].group_id+'>'+customer_group[i].group_name+'</option>';
            }
          }
          type_select = type_select+'</select>';

模态对话框：

 bootbox.dialog({
            onEscape:true,
            backdrop:true,
          message: '<div class="row">  ' +
                   '<div class="col-md-12"> ' +
                   '<form class="form-horizontal"> ' +
                   '<div class="form-group"> ' +
                   '<label class="col-md-4 control-label" for="awesomeness">Phone: </label> ' +
                   '<div class="col-md-4">' +
                   '<input id="edit-phone_no" type="text" value="'+table_column_7+'"/>' +
                   '</div><br>' +
                   '<label class="col-md-4 control-label" for="awesomeness">Name: </label> ' +
                   '<div class="col-md-4">' +
                   '<input id="edit-name" type="text" value="'+table_column_2+'"/>' +
                   '</div><br>' +
                   '<label class="col-md-4 control-label" for="awesomeness">Type: </label> ' +
                   '<div class="col-md-4">' +type_select+
'</div>'+
                   '</form> </div>  </div>'});

Javascript/AJAX输入phone号码时自动显示客户姓名和类型的功能

document.getElementById('edit-phone_no').onkeyup = function(){
     text_length = $('#edit-phone_no').val().length;
     if (text_length >= 8){
      $.ajax({
                 url : "<?php echo base_url(); ?>index.php/home/get_name_by_phone_no",
                 type: "post",
                 data: {
                     "phone_no" : $('#edit-phone_no').val(),
                 },
                 success: function(response){
                  console.log(response);
                  var data = JSON.parse(response);
                    if (response != ""){
                     $('#edit-name').val(data.name);
                     $('#type_select').val(data.group_name);

                    }
                 }
             });
     }
}

PHP 函数根据phone 号码从数据库中获取客户的姓名和类型(group_name):

public function get_name_by_phone_no($phone_no){
        $result = "";
        $this->db->select('name,group_id');
        $this->db->where('phone_no',$phone_no);
        $query = $this->db->get('customer');
        if ($query->num_rows() > 0){
        $row = $query->row();
        $group_id = $row->group_id;
        $row->group_name = $this->get_group_name_by_group_id($group_id);
        $result = $row;
        }
        echo json_encode($result);

    }

当我输入 phone 号时。一个客户，我希望名称自动显示在文本框中，客户类型自动 selected 在下拉菜单中（全部基于数据库中的记录）。名称部分现在有效，但类型部分不起作用。一定有问题。请告诉我如何解决它。非常感谢大家的提前帮助。

Answer 1

你的逻辑有问题。当您创建 SELECT 框（下拉菜单）时，您将选项值设置为 group_id 而另一侧您将返回组名：

   $row->group_name = $this->get_group_name_by_group_id($group_id)

ajax 调用中来自服务器的群组名称。

So your mistake is ajax response has group name when options value is in id so

  $('#type_select').val(data.group_name);

data.group_name 与选项中的任何值都不匹配，因此它不起作用。

Answer 2

更改 Javascript/AJAX 功能以在输入 phone 号码时自动显示客户姓名和类型

原文：

document.getElementById('edit-phone_no').onkeyup = function(){
     text_length = $('#edit-phone_no').val().length;
     if (text_length >= 8){
      $.ajax({
                 url : "<?php echo base_url(); ?>index.php/home/get_name_by_phone_no",
                 type: "post",
                 data: {
                     "phone_no" : $('#edit-phone_no').val(),
                 },
                 success: function(response){
                  console.log(response);
                  var data = JSON.parse(response);
                    if (response != ""){
                     $('#edit-name').val(data.name);
                     $('#type_select').val(data.group_name);//original

                    }
                 }
             });
     }
}

现在：

document.getElementById('edit-phone_no').onkeyup = function(){
     text_length = $('#edit-phone_no').val().length;
     if (text_length >= 8){
      $.ajax({
                 url : "<?php echo base_url(); ?>index.php/home/get_name_by_phone_no",
                 type: "post",
                 data: {
                     "phone_no" : $('#edit-phone_no').val(),
                 },
                 success: function(response){
                  console.log(response);
                  var data = JSON.parse(response);
                    if (response != ""){
                     $('#edit-name').val(data.name);
                  /*replaced code*/
                    var store;
                 var types = ["N/A","VIP","Writer","High","Low","No Show","Black List","Cancel","Family","Friend"];
                 for(i=0;i<types.length;i++)
                 {
                    if(types[i]==data.group_name)
                      store=i;
                 }
                 $("#type_select option:contains(" + types[store] + ")").attr('selected', 'selected');

                    }
                 }
             });
     }
}

现在有效。

如何让下拉菜单显示客户当前类型状态

How to let the current type status of the customer show in the drop-down menu

javascript

php

database

modal-dialog

web