选择选项后显示说明

i'm building kinda of store website and i want to display description of an item after the foreach loop

example:

<select>
$cati = getAllFrom("*", "items", "where Cat_ID = {$category} AND visible = 1", "Item_ID");
 foreach($cati as $drop){

echo '<option  id="' . $drop['item_ID'] . '">' . $drop['Name'] . '</option>';

}
<select>


<div>
item description : 
<?php echo "here i want to display description of the selected item"; ?>
</div?

now under that select button i have an description box that i want to display the selected item description from db column , how i can solve that ?

There are two ways to do this.. Either call a ajax and get the description when the dropdown list will change. Or just add the description in the attribute while looping and then show that in the textbox when the change event fire..

<select id = "cats">
<?php 
$cati = getAllFrom("*", "items", "where Cat_ID = {$category} AND visible = 1", "Item_ID");
foreach($cati as $drop){
    echo '<option  id="' . $drop['item_ID'] . '" data-description = "'.$drop['Description'].'">' . $drop['Name'] . '</option>';
} ?>
<select>


<div>
    item description : 
    <p id = "description"></p>
</div>

First Way:

<script>
    $(document).ready(function (){
        $('#cats').on('change', function (){
            $('#description').html($(this).find(':selected').attr('data-description'));
        });
    });
</script>

Second Way:

<script>
    $(document).ready(function (){
        $('#cats').on('change', function (){
            var itemID = $(this).val();
            $.ajax({
                method: 'GET',
                data: {'itemID': itemID},
                url: 'getDescription.php'
                success:function (data){
                    $('#description').html(data);
                }
            })
        });
    });
</script>

 <script>
    $(document).ready(function (){
        $('#id').on('change', function (){
            $(#description).html($(this).find(':selected').attr('data-description'));
        });
    }); </script>