Question

Hi and thanks for taking the time to answer my question. Appreciate it.

Let’s assume I have the following HTML:

<div>
    <div class="selectWrapper">
        <select class="selectable">...</select>
    </div>
    <input />
    <input />
    <input class="thisIsTheInputFieldThatIWantToSelect" />
</div>

and I have the following jquery script:

$('.selectable').bind('change', function(){
    if($(this).val() > 1){
        $(this).parent().next().next().val('').addClass('validate[required]');
    } else {
        $(this).parent().next().next().val("Type your KPI's description").removeClass('validate[required]');
    }
});

Basically when an option is selected (other than the default with value 0) I want to make the sibling input required and empty it’s value. Please have a look at my attempts above. Neither the first nor the second way worked. However, the third way paints the holder div with the particular color depending on the selected option. What am I doing wrong? Thank you!

Answer 1

If ‘.personalWellbeing’ is your select element …

$(this).parent().siblings('.thisIsTheInputFieldThatIWantToSelect').val('');