Two level linkage of filter box written by php ajax js

Demand analysis:

The boss wants to make a three-level menu. The first level menu is fixed, so the requirement is to click on the channel (Level 2) and the three-level display the parameters under the second level option bar.

Implementation mode:

Think about it. A small case is that the front end requests the back end with ajax, and the back end passes the correct value to the front end. It's ok to display it in the drop-down list.

I: front end code

The following are two drop-down lists: the first is level 2, the third is level 3, and the second is to set a click event onchange, that is, click the corresponding drop-down option and go to this function, which writes ajax and back-end communication, and the return value is filled into Level 3.

<td><span style="color:red;">channel:</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;">type:</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 code

The code is very simple. It is an ajax that communicates with the back end. It was written in the original voice before. This time, jQuery is used.

<script type="text/javascript">
    function showAllKind()
    {
      //It will be better to use the second type of 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){
            //analysis
            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: back end code

    //ajax returns kind through channel 
    public function ajaxReturnKind()
    {
        $return_data = array();

        $appid = $this->input->cookie("appid");
        $channel_id = $_REQUEST['channel_id'];
        $result = Value fetched by database; 

        array_unshift($return_data, array('kind_id' => 0, 'kind_name' => "whole"));
        
        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);
    }

I don't know how to do it. I just post two pictures.

Feel the effect.

Tags: PHP Javascript JQuery Database

Posted on Sat, 02 Nov 2019 16:17:55 -0700 by jjrosen