How to hide and show fields in HTML based on selection

Question

I have this code and what I want is that if you click on 'tags' or 'producten, is that you see the options under 'foo' or 'products' based on your selection. So if I click on 'tags' the fields in 'products' shouldn't be available.

I tried to do it with Javascript, but so far I can't get it working cause I don't have a lot experience with it.

See my code below:

<p>
    <select name="choice" style="width: 212px;">
        <option id="tags"name ="tags" value="tags">Tags</option>
        <option id ="producten"name ="producten" value="producten">Producten</option>

    </select>
</p>

<p id="foo" style ="display;none" >

<select name = "id" style="width": 212px;>
        <option  value="id">id</option>
        <option  value="customer_id"></option>
    </select>       
    <select name ="created_at" style="width":212px;>
        <option  value="created_at">created_at</option>
        <option  value="customer_id"></option>
    </select>
    <select name ="is_visible" style="width": 212px;>
        <option  value="is_visible">is_visible</option>
        <option  value="customer_id"></option>
    </select>   
    <select name ="products_count" style="width": 212px;>
        <option  value="products_count">products_count</option>
        <option  value="customer_id"></option>
    </select>   
    <select name ="slug" style="width": 212px;>
        <option  value="slug">slug</option>
        <option  value="customer_id"></option>
    </select>   
    <select name ="title" style="width": 212px;>
        <option  value="title">title</option>
        <option value="customer_id"></option>
    </select>   
    <select name ="updated_at" style="width": 212px;>
        <option  value="updated_at">updated_at</option>
        <option value="customer_id"></option>
    </select>
</p>


 <p id="products" style ="display;none" >
        <select name ="title" style="width": 212px;>
        <option  value="title">title</option>
        <option value="customer_id"></option>
    </select>
 </p>

This is the Javascript that I am using with this code, but it's not really working:

        $(document).ready(function (){
        $("#tags").change(function() {
            // foo is the id of the other select box 
            if ($(this).val() != "producten") {
                $("#foo").show();
            }else{
                $("#foo").hide();
            } 
        });
    });

    $(document).ready(function (){
        $("#producten").change(function() {
            // foo is the id of the other select box 
            if ($(this).val() != "tags") {
                $("#products").show();
            }else{
                $("#products").hide();
            } 
        });
    });

Possible duplicate of [show/hide div based on select option jquery](https://stackoverflow.com/questions/2975521/show-hide-div-based-on-select-option-jquery) — Heretic Monkey, Jul 01 '18 at 00:49

score 1 · Accepted Answer · answered Jul 01 '18 at 00:44

For one thing, don't use "display;none"! Use "display: none". Also you won't need JQuery for this, normal javascript can do just fine. First, change the select tag to this:

<select name="choice" id="choice" style="width: 212px;">
    <option id="tags"name ="tags" value="tags">Tags</option>
<option id ="producten"name ="producten" value="producten">Producten</option>

Next, set the style of "foo" to "display: block", then set the style of products to "display: none". Now use this javascript code:

var choice = document.getElementById("choice");
var foo = document.getElementById("foo");
var products = document.getElementById("products");

choice.onchange = function(){
  if(choice.value == "tags"){
    foo.style.display = "block";
    products.style.display = "none";
  }
  else if(choice.value == "producten"){
    foo.style.display = "none";
    products.style.display = "block";
  }
}

Thank you very much, this was exactly what I was looking for! So let's say if I want to extend this to more choices, I can just the above code just fine right? — Solaiman, Jul 01 '18 at 00:49
@Solaiman Yes, you can use this code for however many options you want, just be sure to set all of the elements to invisible except for the one you want to show. If you don't, multiple of them will show up. — programmer, Jul 01 '18 at 15:58

How to hide and show fields in HTML based on selection

1 Answers1