Question

我是JQuery的新手，也没有使用Javascript的经验。我的目标是允许用户添加一个select元素，如果他需要更多元素，并且如果他选择了一个特定选项来显示旁边的另一个输入字段。我克隆工作，但我无法显示输入字段。我的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>

如果＆＃34;其他......＆＃34;选项被选中我想用类＆＃34; params＆＃34;进行输入。可见。到目前为止我的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绑定到每个select元素，但到目前为止还没有元素响应...

JsFiddle

Answer 1

我考虑以下变化：

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 2

另一种方法是改变你的功能：

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


TO: 


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

Answer 3

Noobed的回答并不正确。所有＆＃34; params＆＃34;字段将显示是否已将其设置为其他字段。

您希望获得相对于您的选择

的输入

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

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

如果克隆选择具有特定值，则使输入字段可见

3 个答案: