如何在下拉列表中選擇值時更改下拉列表框的內容1

Question

我有兩個下拉列表，一次是關於該區域的另一個名稱。在第一個下拉列表中，我設置了一個cookie來獲取該區域第二個下拉列表是獲取用戶名。因此，一旦區域發生變化，第二個下拉列表將根據第一個下拉列表得到不同的名稱。區域cookie是L，P，W，我如何設法改變不同的區域以獲得不同的名稱？

<form id="form" > 
 
    <table cellspacing="5" cellpadding="1" border="0" > 
 
\t <tr> 
 
\t  <td> Sales Area 
 
\t \t <select > 
 
     <?php 
 
      
 
     $sarea = explode(",",$_COOKIE['cooAreaCode']); 
 
     foreach($sarea as $item){ 
 
     ?> 
 
     <option id="slct" value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option> 
 
\t \t 
 
     <?php 
 
\t \t 
 
     } 
 
     
 
\t $sql = "SELECT StaffName FROM tblStaff WHERE AreaCode= '$item'"; 
 
     $rs = odbc_exec($link,$sql); 
 
\t while ($row = odbc_fetch_array($rs)) { 
 
\t \t $porr[] = $row; 
 
\t } 
 
\t  
 
\t odbc_free_result($rs); 
 
\t odbc_close($link); 
 

 

 
    
 
     ?> 
 
     
 
     </select> 
 
     </td> 
 
\t  <td> Staff Name 
 
\t \t <select name="sales_staff_s"> 
 
     <?php 
 
     for($i=0; $i < count($porr);$i++) { 
 
     $staff = explode(",",$porr[$i]['StaffName']); 
 
     foreach($staff as $itm){ 
 
     ?> 
 
     <option value="<?php echo strtolower($itm); ?>"><?php echo $itm; ?></option> 
 
     <?php 
 
     } 
 
\t \t } 
 
     ?> 
 
     
 
     </select> 
 
     </td> 
 
    \t 
 
\t \t 
 
\t </tr> 
 
\t </form>

Answer 1

1）onchange事件添加到您的第一個下拉列表：

<td> 
    <select name="sales_area" id="sales_area" onchange="getSalesName();"> 
     <?php 
     $sarea = explode(",",$_COOKIE['cooAreaCode']); 
     foreach($sarea as $item){ ?> 
      <option id="slct" value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option> 
     <?php } ?> 
    </select> 
</td> 
<td> 
    <div id="sales_area_options"> 
    </div> 
</td> 

2）您需要通過將使用AJAX來填充你的第二個下拉列表中的選項從第一個下拉列表中選擇選項。 JavaScript函數：

function getSalesName() { 
    var sales_area = document.getElementById("sales_area").value; 
    $.ajax({ 
     url: website_url + "/ajax/get_sales_name.php", 
     type: "POST", 
     async: true, 
     dataType: 'json', 
     data: {'sales_area': sales_area}, 
     success: function(data) { 
      var opts = '<select name="sales_staff_s">'; 
      $(data).each(function(index, val) { 
       opts += '<option value="'+val.id+'">'+val.name+'</option>'; 
      }); 
      opts += '</select>';    
      $("#sales_area_options").html(opts);  
     } 
    }); 
} 

3）你的SQL查詢和爆炸的值第二個下拉列表，應在新的PHP文件：

$item = $_POST['sales_area']; 
$sql = "SELECT StaffName FROM tblStaff WHERE AreaCode= '$item'"; 
...