如何在下拉列表1中选择值时更改下拉列表框的内容

时间:2017-07-15 00:51:18

标签: javascript php html ajax drop-down-menu

我有两个下拉列表,一个是关于该区域的另一个是名称。在第一个下拉列表中我设置了一个cookie来获取最初从sql database获取的区域。现在第二个下拉列表是获取用户名因此,一旦区域发生变化,第二个下拉列表将根据第一个下拉列表得到不同的名称。区域cookie是L,P,W,我如何设法更改不同的区域以获得不同的名称?



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


 
        ?>
       
       </select>
       </td>
	    <td>  Staff Name 
		<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
        }
		}
        ?>
       
       </select>
       </td>
    	
		
	</tr>
	</form>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

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'";
...