php ajax js寫的 篩選框二級關聯

需求分析：

     老闆讓做一個三級菜單 ，一級菜單已經固定死， 是以需求就是通過點選管道（二級），三級顯示二級選項欄下面的參數

實作方式：

   想了一想 ，小case，就是前端用ajax請求背景，背景傳給前台正确的值，顯示到下拉清單就ok了嘛

一：前端代碼

  下面是兩個下拉清單，第一個是二級，第三個是三級，第二個設定一個點選事件onchange，也就是點選相應的下拉選項後走這個函數，這個函數裡面寫ajax和後端通訊，傳回值再填入到三級裡面。

<td><span style="color:red;">管道:</span></td>
  <td>
    <select name="channel"  id="channel" value="<?php echo $channel?>" onchange="javascript:showAllKind();">
        <?php foreach ($data_channel as $key)
        { ?>
            <option value="<?php echo $key['channel_id'] ?>" ?> 

                <?php echo $key['channel_name']?>

            </option>
        <?php  }?>
    </select>
    </td>
    <td><span style="color:red;">類型:</span></td>
  <td>
    <select name="kind"  id="kind" value="<?php echo $kind?>">
        <?php foreach ($data_kind as $key)
            { ?>
                <option value="<?php echo $key['kind_id'] ?>" ?> 

                    <?php echo $key['kind_name']?>

                </option>
            <?php  }?>
        </select>
    </td>
           

2:javascript代碼

代碼很簡單就是簡單的一個和後端通信的ajax，以前用原聲寫的，這次用jQuery

<script type="text/javascript">
    function showAllKind()
    {
      //用第二種jQuery會好一點
      // var chann = document.getElementById("channel").value;
      var channel_id = $('#channel').val();
      $.ajax({
          type: "get",  
          url: "your controller Url",  
          data: "channel_id="+channel_id,
          success: function(data){
            //解析
            data = decodeURI(data);
            $('#kind').empty();
            var data = eval('(' + data + ')');
            if (data.length != "" && data.length != null) {
              for(var i = 0;i < data.length;i++){
                    $('#kind').append("<option value=" + data[i]['kind_id'] + ">"
                        + data[i]['kind_name'] + "</option>");
                }
            }
          }, 
        
    });  
    }
</script>
           

3：後端代碼

//ajax 通過管道傳回kind(類型) 
    public function ajaxReturnKind()
    {
        $return_data = array();

        $appid = $this->input->cookie("appid");
        $channel_id = $_REQUEST['channel_id'];
        $result = 資料庫取到的值; 

        array_unshift($return_data, array('kind_id' => 0, 'kind_name' => "全部"));
        
        if(!empty($result))
        {
            foreach($result as $val)
            {
                array_push($return_data,array('kind_id'=>$val['kind_id'],'kind_name'=>db);
            }
        }
        echo json_encode($return_data);
    }
           

效果的話我不會弄動圖就貼兩張圖檔啦

感受一下 就是這效果 perfect