Drop-down quantity menu in a shopping cart

Question

UPDATE : In case anyone is reading this please ignore the fragment when I talk about the "dynamic max quantity" as it doesn't make any sense. I am actually not adding new quantity but updating it with a new number chosen from the drop-down menu, so instead of $i <= $dynamic_max it should be $i = 50 , therefore this code: $static_max = 50; $dynamic_max = $static_max - $value['item_quantity']; $static_max = 50; $dynamic_max = $static_max - $value['item_quantity']; is obsolete. It is not directly relevant to the problem I had and solution given but it makes the code clearer.
END OF THE UPDATE

On the page where a product is listed you chose the quantity using a drop-down menu. You click "Add to basket" and the product is sent to the next page (basket.php) where you are again given an option to change the quantity using a drop-down menu. My problem is that when you click the drop-down menu you see the currently chosen amount at the very top of the list of numbers and then the range of numbers by which you can update the quantity. The range of numbers by which you update the quantity is dynamic, meaning that it depends on the quantity chosen at the first step. The overall available quantity is 50, so when you chose 40, on the next page (basket.php) you will see the range between 0 and 10 only (where 0 is used as "remove") with the currently chosen number on top of the list.

I do not want the currently chosen quantity of product be shown on top of the drop-down menu, I just want the range of available numbers by which you update the quantity.

Can I do it in PHP or do I need to manipulate the DOM with JavaScript?

I'm posting here my code without other parts of the table in which added products are displayed (name of the product, the total etc.), it's only <select> tags. What I have for now is two blocks of <option> tags, one is for the currently chosen quantity and the other is rendered with a for loop to display the range of possible numbers by which you amend the quantity. I have been trying to use only one block of <option> tags and an ' if ' statement but have run several times into infinite loops, so for now the below is the only "working" version.

<select>

<?php
// Quantity added to the basket:                        
if (isset($value['item_quantity'])) {
?>

<option value="<?php echo $value['item_quantity']; ?>"><?php echo $value['item_quantity']; ?></option>

<?php
}
?>

<?php
// Quantity option minus what has been already added to the basket:
$static_max = 50; 
$dynamic_max = $static_max - $value['item_quantity'];
for ($i = 0; $i <= $dynamic_max; $i++) {
?>

<option value="<?php echo $i; ?>"><?php echo $i ;?></option>

Answer 1

You can simply hide that option from select box when ever the select-box gets open and again when it is close show the default value.

Demo Code :

 <select> <!--hidden first option --> <option value="10" selected="selected" hidden>10</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select>

Using jquery :

 $(document).ready(function() { //getting first optino var first = $('#myselect').find('option').first(); //when activated $('#myselect').on('focus', function(e) { first.hide(); //hide the first option }).on('blur', function(e) { //if value select is equal show the first option if ($(this).val() == first.val()) { //showing the same first.show(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="myselect"> <option value="10" selected="selected">10</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select>

Answer 2

Thanks for your help, Swati, much appreciated. No JavaScript necessary, though, just plain HTML. All I had to do was what you had done: add the global attribute "hidden" to the "option" tag:

<option value="<?php echo $value['item_quantity']; ?>" hidden><?php echo $value['item_quantity']; ?>