dongyao2129
2014-05-31 10:49
浏览 119
已采纳

根据先前的选择选项显示/隐藏选择值

I have 2 select's inside a form. The second select has about 2000 lines in total coming out of my mysql table. One of the column into that mysql has 1 of the values used into the first select. I want to be able to filter on that value when it is selected into the first select, so that it only shows these articles.

code now:

<div class="rmaform">
   <select name="discipline" class="discipline">
      <option value="&nbsp;" selected></option>
      <option value="access">ACCESS</option>
      <option value="inbraak">INBRAAK</option>
      <option value="brand">BRAND</option>
      <option value="cctv">CCTV</option>
      <option value="airphone">AIRPHONE</option>
      <option value="perimeter">PERIMETER</option>
   </select>
</div>             
<div class="rmaform">
<select name="article" class="input-article">
   <?php
      $articleselect = $dbh->prepare('SELECT * FROM articles');
      $articleselect->execute();
         while($articlerow = $articleselect->fetch(PDO::FETCH_ASSOC)){
   ?>
      <option value="<?php echo $articlerow['a_code'];?>"><?php echo $articlerow['a_code'];?> <?php echo $articlerow['a_omschr_nl'];?></option>
   <?php
      }
   ?>
</select>

I think i have to use Javascript for it but how do you combine PHP and Javascript? And what would be the best way to make the filter work?

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • doutao6380 2014-05-31 11:11
    已采纳

    jQuery for the change event and AJAX

    $(document).ready(function(e) {
        $('select.discipline').change(function(e) { // When the select is changed
            var sel_value=$(this).val(); // Get the chosen value
            $.ajax(
            {
                type: "POST",
                url: "ajax.php", // The new PHP page which will get the option value, process it and return the possible options for second select
                data: {selected_option: sel_value}, // Send the slected option to the PHP page
                dataType:"HTML",
                success: function(data)
                {
                    $('select.input-article').append(data); // Append the possible values to the second select
                }
            });
        });
    });
    

    In your AJAX.php

    <?php
    if(isset($_POST['selected_option']))
        $selected_option=filter_input(INPUT_POST, "selected_option", FILTER_SANITIZE_STRING);
    else exit(); // No value is sent
    
    $query="SELECT * FROM articles WHERE discipline='$selected_option'"; // Just an example. Build the query as per your logic
    
    // Process your query
    
    $options="";
    while($query->fetch()) // For simplicity. Proceed with your PDO
    {
        $options.="<option value='option_value'>Text for the Option</option>"; // Where option_value will be the value for you option and Text for the Option is the text displayed for the particular option
    }
    echo $options;
    ?>
    

    Note: You can also use JSON instead of HTML for much simplicity. Read here, how to.

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • dqj29136 2014-05-31 11:19

    First give both of the selects an unique ids...

    <div class="rmaform">
       <select name="discipline" class="discipline" id="discipline">
          <option value="" selected></option>
          <option value="access">ACCESS</option>
          <option value="inbraak">INBRAAK</option>
          <option value="brand">BRAND</option>
          <option value="cctv">CCTV</option>
          <option value="airphone">AIRPHONE</option>
          <option value="perimeter">PERIMETER</option>
       </select>
    </div> 
    <div class="rmaform">
    <select name="article" class="input-article" id="article">
       <option value="" selected></option>
    </select>
    

    Now you can use jQuery Ajax call to another file and get the HTML Response from that file and Populate in the select field with id="article" like this...

    <script type="text/javascript">
    $(document).ready(function(){
      $("#discipline").change(function(){
        var discipline = $(this).val();
        $.post(
          "ajax_load_articles.php",
          {discipline : discipline},
          function(data){
            $("#article").html(data);
          }
        )
      });
    });
    </script>
    

    Now create a new file like ajax_load_articles.php... in the same directory where the html file exists... You can place it anywhere but then you have to change the $.post("url", the url to the ajax submission.

    Contents of ajax_load_articles.php :

    <?php  
    $discipline = $_POST["discipline"];
    $articleselect = $dbh->prepare("SELECT * FROM articles WHERE colname = '{$discipline}'");
    $articleselect->execute();
    echo '<option value="" selected></option>';
    while($articlerow = $articleselect->fetch(PDO::FETCH_ASSOC)){
    ?>
      <option value="<?php echo $articlerow['a_code'];?>"><?php echo $articlerow['a_code'];?> <?php echo $articlerow['a_omschr_nl'];?></option>
    <?php
      }
    ?>
    

    Now when ever you will change the select of the first select field an Ajax call will take place and the data of the second select field will automatically adjust to related data selected in the first select field.

    评论
    解决 无用
    打赏 举报
  • duanbai5348 2014-05-31 11:46

    This is an example where you can select the college specific to the state ..

    Form.php

    // your code for form ... 
    
    // select box for state starts
    <div class="form-group">
      <label for="select" class="col-lg-2 col-md-2 control-label">State</label>
      <div class="col-lg-10 col-md-10">
        <select class="form-control input-sm" name="statename" id="stateid">
          <option value="">---- Select ----</option>
          <?php 
    
                            $state=sql::readResultArray("Your Query To select State`");
                            foreach($state as $s){
                                ?>
          <option  value="<?php echo $s?>"> <?php echo $s ?> </option>
          <?php
                                }
                            ?>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="select" class="col-lg-2 col-md-2 control-label">Colleges</label>
      <div class="col-lg-10 col-md-10">
        <select class="form-control input-sm" name="mycollegename">
          <option value="">--- Select --- </option>
        </select>
      </div>
    </div>
    
    // further code for from in form.php..
    

    Script to find the state and then pass the value to find the respective colleges in that state

    <script>
    
            $(document).ready(function(e) {
            $('#stateid').change(function()
                    {   ids=$('#stateid').val();
                        $.get('mycollege.php', {type:ids} ,function(msg){
                                    $('select[name="mycollegename"]').html(msg);
                                });
                    });
        });
         </script>
    

    Call this file through ajax .. Code on this file

    mycollege.php

     <?php 
    
    require('db.php'); // call all function required, db files or any crud files
    
    $type=$_GET['type'];
    
    if(!empty($type)){
    
    $r=sql::read("Your Query To call all teh college list");
    
    ?>
    
    <select name="mycollegename">
      <option value="">Select One</option>
      <?php 
    
            foreach($r as $r){
    
                echo "<option  value=\"$r->collegename\">$r->collegename  </option>";
    
            }
    
    ?>
    </select>
    <?php }else{ ?>
    <select name="mycollegename">
      <option value="">Select State</option>
    </select>
    <?php } ?>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题