CODEWITHSUNDEEP
javascriptphphtmlsql
Youssef Hossam
Youssef Hossam

Reputation: 103

I want to Add Value to a Drop down list if i choose a specific value in another drop down list

I have a drop down list that contains the name of some products, i want to show another drop down list (for size, S,M,L) if the user chooses a specific product and i don't want to add it to the other values(products) because they don't have sizes

    <label>Product:</label> <select name="product">
        <option value="1">Paper</option>
        <option value="2">Bags</option>
        <option value="10">Backpacks</option>
        <option value="3">something something</option>
        <option value="4">some other thing</option>
        <option value="20">brand bags</option>
        </select>

        <select name="size3">
        <?php  
        if($_POST['product']=="10" || $_POST['product']=="20"){
            echo   "<option value=`1`>Small</option>".
                    "<option value=`2`>Medium</option>".
                    "<option value=`3`>Large.</option>";
            }
        ?>
        </select>

When it comes to the output the dropbox actually have the values that i want but that is after i choose THE specific value and refreshes the page

Upvotes: 3

Views: 105

Answers (1)

PhilMaGeo
PhilMaGeo

Reputation: 551

set a listener in javascript on the main select and then hide or show the size select You can do a lot in javascript before sending the result to the back

       let el = document.getElementsByName("product");
       let target = document.getElementById("size3");
       el[0].addEventListener("change",function(){
            let choice = this.value;
            if(choice == "20" || choice == "10"){
                target.style.display="inline-block";
            }else{
                target.style.display="none";
            }
        });
        <label>Product:</label> 
        <select name="product">
          <option value="1">Paper</option>
          <option value="2">Bags</option>
          <option value="10">Backpacks</option>
          <option value="3">something something</option>
          <option value="4">some other thing</option>
          <option value="20">brand bags</option>
        </select>

        <select name="size3" id="size3" style="display:none;">
              <option value="1">Small</option>
              <option value="2">Medium</option>
              <option value="3">Large</option>
        </select>

Upvotes: 2

Related Questions