下拉列表到 JavaScript 数组以填充文本框答案

【问题标题】：Dropdown list to JavaScript array to fill text boxes下拉列表到 JavaScript 数组以填充文本框
【发布时间】：2015-03-04 14:43:38
【问题描述】：

我正在尝试在工作表系统表单上显示一个 MySQL 表，我正在制作下拉列表中显示客户详细信息，然后一旦选择了这些字段，就应该在主表单上填写这些字段。

我知道人们倾向于使用 AJAX，但这是用于连接到手机的平板电脑上，并且希望尽可能少地询问服务器。

因为我已经从 SQL 中获得了显示下拉菜单的详细信息，所以我想我可以使用它。我在以下位置找到了原始代码：

http://board.phpbuilder.com/showthread.php?10372137-RESOLVED-How-do-I-populate-multiple-text-boxes-from-a-dropdown-(I-can-populate-1-text-box!)

但我也想显示不在下拉列表中的项目。有人说它有效，但我学到的越多，我就看不出是怎么回事，因为它正在构建的数组似乎不是 JavaScript 格式。

我可以使用下拉菜单，它还使用名称填充 JavaScript 数组，但我无法弄清楚如何使用该数组在字段中显示。

似乎是数组中使用的命名索引。当我使用普通静态数组时，我可以显示一个测试数组，但我已将它们注释掉，但一旦我尝试使用数组上的名称，我就会得到未定义的错误。

<html>
<head>

<script type="text/javascript"> 




    <?php

      include_once 'includes/db_connect.php';

        $query1 = "SELECT * FROM customer";
            $result1 =($mysqli-> query($query1));


        // build javascript array building an object


        // build javascript array
          while($row=mysqli_fetch_array($result1)){ 
          echo 'customer['.$row['customer_id'].'] = new Array(';
          echo 'customer['.$row['customer_id'].'][customer_id] = "'.$row['customer_id'].'";';
          echo 'customer['.$row['customer_id'].'][post_code] = "'.$row['post_code'].'";';
          echo 'customer['.$row['customer_id'].'][company_name] = "'.$row['company_name'].'");';
        }

        ?> 

    </script>


</head>

<body>

    <form name="customerform" form id="customerform"> 
<p>


    <select name="customerselect" id="customerselect" onChange="showname()"> 
        <option value="">Select customer</option> 

        <?php
            $query1 = "SELECT * FROM customer";
            $result1 =($mysqli-> query($query1));

            // build javascript array
            while($row=mysqli_fetch_array($result1)){ 
                echo'<option value="'.$row['customer_id'].'">'.$row['forename'].'">'.$row['surname'].'">'.$row['customer_name'].'</option>';
            }           

                        ?>
        </select>
</p>
<p>
<input type="text" name="cust" value="" id="cust" />

<input type="text" name="cust" value="" id="customerselected" />
<input type="text" name="post_code" value="" id="post_code" />
</p>
<p>update
  <input type="button" name="update" id="update" value="update" onClick="showname()">

<p>&nbsp;</p>
<p>
  <input name="submit" type="submit" id="submit" value="submit" />
</p> 
    </form>


</body>

<script>    

        //var customer = Array();
        var customer = Array();
        //This below is a test multi dimensional Array which does work. //
        //customer['CCS'] = Array[{forename:'Robert', surname:'Grain', company:'HOMS'}];

    function showname() {


        //this var takes the result of the selected drop down list and shows the correct part of the array.
        var customerselected = document.getElementById('customer');
        customername = customerselected.value;

        // this does work but not from the array just fills the details up
        document.customerform.customerselected.value = customername;

        // the next part takes the selected dropdown data and calls for the correct place in the array
        // document.getElementById("cust").value = customer['CCS'][0];
        // document.getElementById("cust").value = customer[CCS]["forename"] ;
        // (customer[''][forename]);
         document.customerform.post_code.value = customer[customerselect]["post_code"];


    }

    window.onload=function() {
        showname();
    } 

</script>
</html>

这是控制台中资源管理器的源代码。来自 JavaScript 数组。

</body>
</html>customer[118] = new Array(customer[118][customer_id] = "118";customer[118][post_code] = "L37 4RG";customer[118][company_name] = "jc knight");customer[119] = new Array(customer[119][customer_id] = "119";customer[119][post_code] = "DE56 7HG";customer[119][company_name] = "farm Customer giles");customer[122] = new Array(customer[122][customer_id] = "122";customer[122][post_code] = "LE67 8FH";customer[122][company_name] = "a test company");

此下拉列表还会创建：

 <select name="customerselect" id="customer" onChange="showname()"> 
        <option value="">Select customer</option> 

        <option value="118">John">Knight"></option><option value="119">Bill">Giles"></option><option value="122">Robert">Grain"></option>       </select>
</p>

也许我应该将代码移动到 JavaScript 数组的 HTML 底部，尽管我不确定它是否会在需要时初始化，因为它首先运行了 HTML。我有点不确定事情的顺序是否正确。

我收到的错误在我更改下拉列表后立即发生，它显示以下内容：

      document.customerform.post_code.value = customer['customerselect'][post_code];
}

X 'post_code' is undefined

我认为在显示我的数组时我的 document.value 有错误？

【问题讨论】：

我们可以看到添加到 HTML 中的 JavaScript 数组的示例吗？您是否使用“查看源代码”来检查它是否呈现正常？页面加载是否有 JS 错误？
代码后面的customer初始化会不会一开始就覆盖PHP编写的JS？
您好 halfer 我在资源管理器中按了 F12 并显示以下内容。

标签： javascript php jquery mysql arrays

【解决方案1】：

而不是希望常量在这里起作用。请尝试以下替代方法：

    // build javascript array
    while($row=mysqli_fetch_array($result1)){ ?>
      var customer["<?=$row['customer_id']?>"] = [];
      customer["<?=$row['customer_id'];?>"]['customer_id'] = "<?=$row['customer_id'];?>";
      customer["<?=$row['customer_id'];?>"]['post_code'] = "<?=$row['post_code'];?>";
      customer["<?=$row['customer_id'];?>"]['company_name'] = "<?=$row['company_name'];?>";
    <? }

【讨论】：

感谢 smftre。最后我选择了jquery和ajax。而且我认为它已经成功了，最初我试图使代码在带宽上尽可能高效，因为要使用该系统，但 ajax 似乎是标准，并且工作得很好。

【解决方案2】：

感谢 smftre。最后我选择了jquery和ajax。并且我认为它已经成功了，最初我试图使代码在带宽上尽可能高效，因为要使用该系统，但 ajax 似乎是标准，并且工作得很好。

【讨论】：