Dropdown dynamic menu html

Question

Dropdown dynamic menu html

Navigation

#1 by (1 votes)

0

Hello,

I have this page in html and I would like to know how I can do it so that when changing the chosen item 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,

html jquery dropdown

asked by anonymous 25.09.2016 / 21:09

1 answer

JasperReports report with multiple parameters List random objects

score 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><optionvalue="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>

Look at the example. First I bundled the fields for each type of dropdown. Note that they have a class that is item- [dropdown value selected].

As soon as any modification occurs in the dropdown field is hidden all groupings with the class item. I get the selected value and add a new selector. So if you select the vehicle option the div is displayed with the item-vehicle class.