Append input field with click in select menu

Question

I have a select options menu. I want that jQuery/ javascript appends an input field in a specific "div content" under the menu when clicking a certain option value in it.

At the moment nothing gets triggered with the click event.

If you click in the select menu on the option value "Search Field" an input field should be created in the <div id="content"> area.

My code:

$('.inputicon').click(function() {
  $(".content").append('<input id="test">')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="category6" id="category6" class="form-control">
  <option value="">Delete</option>
  <optgroup label="Search" value="iconsearch">
    <option class="inputicon " value="16">Search Field</option>
  </optgroup>
</select>

<div id="content"></div>

Menu options don't get click events. Use the change event of the dropdown. — Barmar
– Barmar, Commented Aug 13, 2021 at 1:19

Barmar · Accepted Answer · 2021-08-13 01:22:56Z

1

Options don't get click events. Use the change event of the <select> and check if the value is 16.

$('#category6').change(function() {
  if (this.value == '16') {
    $("#content").append('<input id="test">')
  } else {
    $("#test").remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="category6" id="category6" class="form-control">
  <option value="">Delete</option>
  <optgroup label="Search" value="iconsearch">
    <option class="inputicon " value="16">Search Field</option>
  </optgroup>
</select>

<div id="content"></div>

answered Aug 13, 2021 at 1:22

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Append input field with click in select menu

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related