Home/ Questions/Q 9122131
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T06:01:25+00:00

The script below works fine, it combine JavaScript and PHP. By pressing the button

  • 0

The script below works fine, it combine JavaScript and PHP.
By pressing the button I get its value (buttonValue = 20) and the existing item list (A,B,C) is being replaced by the new list that stopped when $i <= 10 (1,2,3… 10):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){

    var buttonValue = $(':button').val();
    alert(buttonValue);

    $("#City > option").remove(); // remove all items from list
    <?php $i = 1; while ($i <= 10): ?>
    $('<option><?php echo $i; ?></option>').appendTo('#Country select'); 
    <?php $i++; endwhile; ?>
  });
});
</script>

<body>
    <button value="20">click to start</button>
    <div id="Country">
      <select id="City">
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
      </select>
    </div>
</body>

I would like to change the PHP loop so that instead $i <= 10, it will show $i <= $the_buttonValue (assign the button value to show numbers 1,2,3… 20).

I’ve tried jQuery AJAX functions: load(), get() or the ajax() method, to send the variable to the server but that doesn’t seems to solve the above request.

I know that the two sides of PHP and JavaScript are communicate differently and that maybe an AJAX request can get the new requirement to work, but I’m not sure how.

Any tip to make it works as requested, would be greatly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you dont need php for this particular problem but if you must use it for some reason then you can use jquery load() function like:

    your.html

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){

    var buttonValue = $(':button').val();
    alert(buttonValue);

    $("#City > option").remove(); // remove all items from list
    $('#Country').load('your.php?value='+buttonValue+' #Country')
  });
});
</script>

<body>
    <button value="20">click to start</button>
    <div id="Country">
      <select id="City">
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
      </select>
    </div>
</body>

    your.php

    <div id="Country">
      <select id="City">

<?php 
    $val = $_GET['value']; //this will be your button value
    $i = 1;
    while (true)
    {
?>
        <option value="">
                    <?php echo $i++; if($i==$val) break; ?>
        </option>
<?php
    }
?>
      </select>
</div>

    My first ever stackoverflow answer, hope you will vote up 🙂

    • 0