使用jquery php [closed]从数据库onchange选择值显示不同的数据

Question

I want to display user data of different group when a user select group from dropdown list. I want to do it with jquery or ajax without refreshing page. I have already fetch the data from Sql database from C# code behind. Please tell how to bind the data fetch from the database using C# code to HTML dropdown using Jquery or ajax?

I have retrieved groups from database and displayed it to an select box

<select name="group" id="group"> 
  <option value="1">Group A</option>
  <option value="2">Group B</option>
  <option value="3">Group C</option>
</select>

Answer 1

Ok, so assuming you have a drop-down and want to use jquery to fetch new content into a display area based on its value, simply do something like this:

HTML (or PHP) Front End

<select id='category'>
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
    <option value="3">Category 3</option>
    <option value="4">Category 4</option>
</select>
<div id='display_area'></div>

• Notice that each option as the value parameter set appropriately

---

JavaScript/jQuery

<script type="text/javascript">
        $(document).ready(function(){
            $('#category').change(function(){
                //Retrieve Content from the back-end PHP page, and pass the ID selected
                var url = 'fetch_category.php?id=' + $(this).val();
                $('#display_area').load(url);
            });
        });
</script>

• The function will call the back-end PHP page and pass the selected ID

---

Back-end fetch_category.php

<?php
    //Resolve the ID passed by the Javascript Function
    $id = $_REQUEST['id'];

    //Generate Content Specific to the ID contained in $id

?>

• Anything Generated in this PHP file will be populated in the designated display area

---

ALTERNATIVE METHOD

Rather than using ajax (depending on your needs) you could just use PHP in the initial page generation to create a div for each category content. You can use an id for each like id='category_1' so that your JS will look like this:

<script type="text/javascript">
        $(document).ready(function(){
            $('#category').change(function(){
                var id = $(this).attr('id');
                $('#display_area').html($('#category_' + id).clone());
            });
        });
</script>