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