JavaScript数组的下拉列表以填充文本框

Question

我试图在工作表系统表单上显示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错误了吗？

Answer 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'];?>";
    <? }

Answer 2

感谢smftre。 最后，我选择了jquery和ajax。 而且我认为它最初是可以解决的，我试图使代码在带宽上尽可能高效，因为要使用该系统，但是ajax出于某种原因似乎是标准，并且运行良好。

JavaScript数组的下拉列表以填充文本框

问题描述

2 个解决方案

解决方案1
0 2015-04-01 11:50:36

解决方案2
0 已采纳 2015-08-27 12:44:02

JavaScript数组的下拉列表以填充文本框

问题描述

2 个解决方案

解决方案1 0 2015-04-01 11:50:36

解决方案2 0 已采纳 2015-08-27 12:44:02

解决方案1
0 2015-04-01 11:50:36

解决方案2
0 已采纳 2015-08-27 12:44:02