显示 PHP MySQL 中的选定选项

Question

I wants to display the selected program option (selectedprg) and perform on the COUNT of the program (selectedcount) but currently there is no data display after click the button. Please assist on this issue. Thank you for your time.

Dropdown selection

<select id="prg" name="prg"  class="demoInputBox" style="padding: 3px; width: 350px;">
    <option value="">Select Programme</option>

        <?php
        //"SELECT * FROM marketing_data WHERE intake_year = '" . $_GET['intake_year'] . "'";
        $sql = "SELECT DISTINCT student_prg FROM marketing_data";
        $do = mysqli_query($conn, $sql);
                          while($row = mysqli_fetch_array($do)){
                              echo '<option value="'.$row['student_matric'].'" data-count="'.$row['count'].'">'.$row['student_prg'].'</option>';
                          }
                      ?>
    </select>

Display data after click button

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "The next intake for " +selectedprg + " will have " +selectedcount+ " students";
}
</script>

Javascript

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){

$("#prg").change(function(){
 var selectedprg = $('#prg option:selected').text(); 
var selectedcount = $('#prg option:selected').data('count');

</script>

screencapture

Answer 1

Some things to note:

• selectedprg and selectedcount are not globally available, you can't access them in your function. Move/declare them outside.
• Your $(document).ready(function(){ and $("#prg").change( function(){ are missing their closing }) parts.

Use your browsers DevTools console to check for errors.

Try this:

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
  var selectedprg = '';
  var selectedcount = 0;

  function myFunction() {
    document.getElementById("demo").innerHTML = "The next intake for " +selectedprg + " will have " +selectedcount+ " students";
  }

  $(document).ready(function(){
    $("#prg").change( function(){
      selectedprg = $('#prg option:selected').text(); 
      selectedcount = $('#prg option:selected').data('count');
    });
  });
</script>