Trigger event on select option in select input

Question

I have trouble in trigger event on select input. I need to display input type text when option "Another" is selected. Here is the code:

HTML:

<div class="form-group">
    <label class="control-label" for="affiliation">Occupation:</label>
    <select name="affiliation" id="affiliation" class="form-control required>
        <option value="Choose" selected>Choose</option>
        <option value="valueA">Student</option>
        <option value="valueB">Lecturer</option>
        <option value="valueC">Scientist</option>
        <option value="Another">Another</option>
     </select>
</div>
<div class="form-group hide">
     <input type="text" name="anotherV" id="anotherV" class="form-control" placeholder="Plese enter your occupation" required>
</div>

CSS:

.hide {display: none;}

I use bootstrap

Answer 1

You have a missing closing double-quote in your HTML after form-control in your select. Below that's fixed, and there's an ID added to the parent div of your hidden input field to make the code easier to understand, feel free to alter if you're comfortable.

HTML

<div class="form-group">
    <label class="control-label" for="affiliation">Occupation:</label>
    <select name="affiliation" id="affiliation" class="form-control" required>
        <option value="Choose" selected>Choose</option>
        <option value="valueA">Student</option>
        <option value="valueB">Lecturer</option>
        <option value="valueC">Scientist</option>
        <option value="Another">Another</option>
     </select>
</div>
<div class="form-group hide" id="hiddenInputContainer">
     <input type="text" name="anotherV" id="anotherV" class="form-control" placeholder="Plese enter your occupation" required>
</div>

jQuery

 $( "#affiliation" ).change(function(event) {
        if ($(this).val() === "Another") {
            $('#hiddenInputContainer').toggleClass('hide');
        }
  });

Answer 2

$("#affiliation").change(function() {
   if (this.value === "Another") $(".hide input").show()
   else $(".hide input").hide()
})

Answer 3

You can use change() event handler with toggleClass()

1. Use change() for handling change event
2. parent() for selecting parent of the element
3. toggleClass() with flag for toggling the class hide

DEMO :

 $('#affiliation').change(function() { $('#anotherV').parent().toggleClass('hide', this.value != 'Another'); });

 .hide { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="form-group"> <label class="control-label" for="affiliation">Occupation:</label> <select name="affiliation" id="affiliation" class="form-control required"> <option value="Choose" selected>Choose</option> <option value="valueA">Student</option> <option value="valueB">Lecturer</option> <option value="valueC">Scientist</option> <option value="Another">Another</option> </select> </div> <div class="form-group hide"> <input type="text" name="anotherV" id="anotherV" class="form-control" placeholder="Plese enter your occupation" required> </div>