Сделать поле ввода видимым, если клонированный выбор имеет определенное значение

Question

Я новичок в JQuery и не имею опыта Mich с Javascript. Моя цель - позволить пользователю добавлять элемент выбора, если ему нужно больше, и если он выбрал конкретную опцию для отображения другого поля ввода рядом с ним. Я получил клонирование, но я не могу отобразить поле ввода. Моего HTML:

<div class="right"> 
    <a href="#" id="addField">Add parameters</a><br> 
    <label for="link[]" class="wrap"><span class="label">Parameter:</span> 
     <select name="link[]" size="1" id="link"> 
     <option value="lang">lang</option> 
     <option value="action">action</option> 
     <option value="mode">mode</option> 
     <option value="other">Other...</option> 
     </select> 
     <input type="text" name="other_link[]" style="display:none" class="params">- 
     <input type="text" name="parameter[]"> 
     <a href="#" style="display:none;" class="remove">Remove</a><br> 
    </label> 
</div> 

Если «Other ...» выбрана опция Я хочу, чтобы сделать вход с классом «Params» видимым. Мой JQuery до сих пор:

$(function(){ 
    var i = 1; 

    // Add a clone 
    $('#addField').click(function(){ 
    if(i < 6){ 
     $(".wrap").clone().attr('class','wrap'+i).appendTo(".right"); 
     $(".wrap"+i).children("select").attr('id','link_'+i); 
     $(".wrap"+i).children("a").attr('style','display: inline;'); 
     $(".wrap"+i).children("input.params").attr('id','i_wrap'+i); 
    } 
    i++; 
    return false; 
    }); 

    // Remove a clone 
    $(document).on('click', '.remove', function(e){ 
    $(this).parent().remove(); 
    i--; 
    }); 

    // Make the input visible 
    $("select").change(function(){ 
    parentID = $(this).parent().attr('class'); 
    if ($(this).val() === 'other'){ 
     $('.i_'+parentID).show(); 
    } else { 
     $('.i_'+parentID).hide(); 
    } 
    }); 
}); 

Моя цель здесь была просто связать OnChange для каждого выбора элемента, но ни один элемент не отвечает до сих пор ...

JsFiddle

Answer 1

Другой способ немного изменить ваши функции:

 
$("select").change(function(){ 
 

TO: 
 

$(document).on('change', "select", function(){ 
    parentID = $(this).parent().find('.params'); 
    if ($(this).val() === 'other'){ 
    parentID.show(); 
    } else { 
    parentID.hide(); 
    } 
}); 

Answer 2

Я бы рассмотреть следующие изменения:

function additionalField() { 
    parentID = $(this).parent().attr('class'); 
    if ($(this).val() === 'other') { 
     $(this).parent().find('input.params').show(); 
    } else { 
     $(this).parent().find('input.params').hide(); 
    } 
    } 

// Make the input visible 
$(document).off("change", 'select', additionalField); 
$(document).on("change", 'select', additionalField); 

Answer 3

Ответ Noobed неверен. Все поля «params» будут отображаться, если один из них установлен на другое.

Вы хотите, чтобы получить вход по отношению к вашему отборному

$(document).on("change", 'select', function() { 
    if ($(this).val() === 'other') { 
    $(this).next().show(); 
    } else { 
    $(this).next().hide(); 
    } 
}); 

https://jsfiddle.net/qnLembmx/3/