Dropdown menu dynamic html

Asked

Viewed 672 times

0

Hello,

I have this page in html and would like to know how I can do so so that when changing the item chosen in the dropdown menu, the html fields change.

<fieldset id="fsItem">
                <legend>Item &nbsp;&nbsp;&nbsp; 
                    <button id="bAnt"><</button>
                    <input type="text" class="input" id="idItem" value="0" disabled>
                    <button  id="bNex">></button>
                    <button  id="bAdd">+</button>
                    <button  id="bRem">&ndash;</button>
                </legend>
                <label>Item</label>
                    <select>
                        <option value="person">Person</option>
                        <option value="vehicle">Vehicle</option>
                        <option value="animal">Animal</option>
                    </select>
                <p><label>Name</label>
                <input type="text" class="input" id="nameItem" value="" disabled>
                <p><label>Age</label>
                <input type="text" class="input" id="ageItem" value="" disabled>
                <label id="lbAs">Associate</label>
                <input type="checkbox" class="input" id="chkAs" value=""></p>
                <p><label>Details</label>
                <textarea class="input" id="detailsItem" rows=5 disabled></textarea></p>

The default page would be "Person". When selecting "Vehicle", for example, the "Name" and "Age" fields would be replaced by "Type" and "Color". The "Associate" would disappear.

Thanks in advance,

jquery html dropdown

  • It is difficult to give a good answer because I am in the mobile APP and the text would be great! But I’ll give you just an idea. Think of it as if your "option" was an anchor link. That by selecting you would trigger a function! In case you can trigger a function that will read the value attribute. With this attribute you will generate a new function and apply its result to the label referring to the selected option!

  • thanks for the idea!

1 answer

1

$('select').change(function() { 
    $('.item').hide();
    $('.item-' + $(this).val()).show();
});
.item-vehicle,
.item-animal {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Item</label>
<select>
  <option value="person">Person</option>
  <option value="vehicle">Vehicle</option>
  <option value="animal">Animal</option>
</select>

<!-- Agrupamento dos campos Person -->
<div class="item item-person">
  <p>
    <label>Name</label>
    <input type="text">
  </p>

  <p>
    <label>Age</label>
    <input type="text">
  </p>

  <p>
    <label>Associate</label>
    <input type="checkbox">
  </p>
</div>

<!-- Agrupamento dos campos Vehicle -->
<div class="item item-vehicle">
  <p>
    <label>Type</label>
    <input type="text">
  </p>

  <p>
    <label>Color</label>
    <input type="text">
  </p>
</div>

<!-- Agrupamento dos campos Animal -->
<div class="item item-animal">
  formulário...
</div>

<!-- Campos comuns entre os três -->
<p>
  <label>Details</label>
  <textarea class="input"></textarea>
</p>

See if the example answers. First I grouped the fields for each dropdown type. Note that they have a class that is item-[value of the dropdown selected].

Once any modification occurs in the dropdown field all groupings with the item class are hidden. I get the selected value and assemble a new selector. Thus selecting the Vehicle option displays the div with the item-Vehicle class.

  • I was in doubt in the code . item-Vehicle, . item-animal { display: None; }. The answer is very well explained! Thank you!

Browser other questions tagged jquery html dropdown

You are not signed in. Login or sign up in order to post.