显示文本框多行值

时间:2018-07-12 08:00:16

标签: javascript php jquery ajax

我有一个Category下拉选项和Mobile_Number文本字段。根据我的类别选择,“移动”文本框将获取数据库值。

我的问题是,有时同一类别具有两个或多个“移动”文本框值。在这种情况下,我希望所有手机号码值都显示在一个用逗号(,)分隔的单个文本框中。

样本表数据

Mobile_Number  Category
  123            IT
  345            IT
  456            IT

在这种情况下,当选择“ IT”类别时,我想在下面的文本框中显示输出:-

123,345,456

我的工作代码:

Ajax页面代码:

$departid = $_POST['depart'];   // department id    
$sql = "SELECT Mobile_Number FROM admin_panel WHERE Category=".$departid;    
$result = mysqli_query($db, $sql);    
$users_arr = array();

while ($row = mysqli_fetch_array($result))
{
  //$userid = $row['Emp_Id'];
  $name = $row['Mobile_Number'];
  //$users_arr[] = array("id123" => $userid, "name123" => $name);
  $users_arr[] = array("name123" => $name);
}
echo json_encode($users_arr);

下拉菜单和文本框

<select name="cat" id="cat">
  <option disabled selected value> -- select an option -- </option>
  <option value="1">Stencil Team</option>
  <option value="2">Tooling Team</option>
  <option value="3">IT</option>
  <option value="4">Manager</option>
</select>

<input name="phoneNumber" id="pnum" type="text">

JavaScript:

$(document).ready(function(){
  $("#cat").change(function(){
    var deptid = $(this).val();
    $.ajax({
      url: 'ajaxdropdown.php',
      type: 'post',
      data: { depart: deptid },
      dataType: 'json',
      success: function(response) {
        var len = response.length;                      
        $("#pnum").empty();
        for (var i = 0; i<len; i++) {
          var name1234 = response[i]['name123'];
          $("#pnum").val(name1234);
        }
      }
    });
  });
});

4 个答案:

答案 0 :(得分:0)

您的success功能必须进行修改:

function(response){
    var len = response.length;
    var name1234 = "";                      
    $("#pnum").empty();
    for( var i = 0; i<len; i++){
        name1234 += (name1234.length < 1) ? response[i]['name123'] : ',' + response[i]['name123'];
    }
    $("#pnum").val(name1234);
}

答案 1 :(得分:0)

您可以使用map()构建一个返回的name123值的数组,然后将其join()组合在一起,然后再将其设置为输入的val()。像这样:

success: function(response) {
  var names = response.map(function() {
    return this.name123;
  });
  $("#pnum").val(names.join(',');
}

答案 2 :(得分:0)

您无需在AJAX页面代码中执行while循环,您可以在查询中使用GROUP_CONCAT和GROUP BY来分隔多个移动电话号码逗号。

检查以下 AJAX页面代码

<?php
$departid = $_POST['depart'];   // department id
$sql = "SELECT GROUP_CONCAT(Mobile_Number) AS mob_number FROM admin_panel WHERE 
Category='".$departid."' GROUP BY Category";
$result = mysqli_query($db,$sql);
$row = mysql_fetch_row($result);
$name = $row[0];
echo json_encode($name);
?>

根据此代码的输出,您也不需要Java语言中的For循环。您只需将AJAX的响应设置为 phoneNumber 字段。

JavaScript代码

$(document).ready(function(){
  $("#cat").change(function(){
    var deptid = $(this).val();
    $.ajax({
      url: 'ajaxdropdown.php',
      type: 'post',
      data: { depart: deptid },
      dataType: 'json',
      success: function(response) {
          $("#pnum").val(response);
      }
    });
  });
});

答案 3 :(得分:0)

希望这对您有帮助(PHP):

$numbers = [];
while ($row = mysqli_fetch_array($result)) {
    $numbers[] = $row['Mobile_Number'];
}

echo json_encode(implode(', ',$numbers));

并将其发送给js:

success: function(response) {                    
    $("#pnum").empty().val(response);        
}