CODEWITHSUNDEEP
jquery
Faudzif
Faudzif

Reputation: 31

jquery Option Function Should Work Separately

I've written this jquery function and want to work separately.

$(function(){
    $('.otherreason').hide();
    $('.inqPurpose').change(function() {
        if($(this).find('option:selected').val() == "Other"){
            $('.otherreason').show();
        }else{
            $('.otherreason').hide();
        }
    });
});

This html code repeat 4 times in a form tag and when I click any other option field all html work together and I want work it separately 

<select class="inqPurpose formField" name="how2" id="how2">
    <option>Sales</option>
    <option>Services</option>
    <option>Corporate Partnership</option>
    <option>Corporate Trade Show</option>
    <option>Requesting Product Samples for Trade Show or Event</option>
    <option>Website Feedback</option>
    <option value="Other">Other (Please Specify)</option>
</select>

<input class="formField otherreason" type="text" placeholder="Other Reason" size="53" maxlength="300" />

Upvotes: 0

Views: 26

Answers (1)

Anton
Anton

Reputation: 32581

If you have other reason right after the select option you can use .nextAll() and find the first otherreason class 

$(function(){
    $('.otherreason').hide();
    $('.inqPurpose').change(function() {
        if($(this).val() == "Other"){
               $(this).nextAll('.otherreason:first').show();
        }else{
           $(this).nextAll('.otherreason:first').hide();
        }
    });
});

fiddle demo here http://jsfiddle.net/kgPaY/1/

Upvotes: 2

Related Questions