Question

我有以下JS / jQuery代码将行追加到现有表中。在追加时，我想仅在＆＃34;选择＆＃34;时显示输入字段。或＆＃34;电台＆＃34;被选为选项类型。

当我添加多行时，输入字段的出现/消失取决于第一个添加的行。我希望它只显示/隐藏选择任意两个选项的行。

希望有道理。任何建议都会有所帮助。谢谢！

HTML：

<table id="tbl-formfields" class="table vertical-align table-condensed" >
    <thead>
        <tr>
            <th>Input Type</th>
            <th>Make Required</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="tbody">
        <tr id="tr-formField">
            <td>
                <div>
                    <select name="formOptionType[]" id="formOptionType">
                        <option value="">-------------------------------------</option>
                        <option value="text">Text</option>
                        <option value="textarea">Textarea</option>
                        <option value="select">Select Options (Dropdown)</option>
                        <option value="radio">Radio Buttons</option>
                        <option value="checkbox">Checkbox</option>
                    </select>
                </div>
                <div id="block-optionsInput" style="display:none">
                    <label>Options:</label><br>
                    <input id="options" type="text" name="fieldOptions[]" data-role="tagsinput"/>
                </div>
            </td>
            <td>
                <label><input type="checkbox" name="fieldRequired[]"/> Required</label>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

jQuery的：

    //****Repeat form field block****
    var repeatBlock = "#tbody";
    var repeatText = '<tr class="trRepeat">\n\
        <td>\n\
            <select class="optType" name="formOptionType[]">\n\
                <option value="">-------------------------------------</option>\n\
                <option value="text">Text</option>\n\
                <option value="textarea">Textarea</option>\n\
                <option value="select">Select Options (Dropdown)</option>\n\
                <option value="radio">Radio Buttons</option>\n\
                <option value="checkbox">Checkbox</option>\n\
            </select>\n\
            <div class="optBlock" style="display:none">\n\
                <label>Options:</label><br>\n\
                <input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput"/>\n\
            </div>\n\
        </td>\n\
        <td><label><input type="checkbox" name="fieldRequired[]"/> Required</label></td>\n\
        <td><a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">\n\
            <span class="glyphicon glyphicon-remove"></span></a>\n\
        </td></tr>';

    $("#btn-addfield").click(function (e) {
        e.preventDefault();
        $(repeatBlock).append(repeatText);
    });
    $(repeatBlock).on('click', '.removeField', function (e) {
        e.preventDefault();
        $(this).parent().parent().remove();
    });

    //****Show input field when dropdown/radio is selected****
    $(repeatBlock).on('change', $(".optType").val(), function (e) {
        e.preventDefault();
        if ($(this).find(".optType").val() === "radio" || $(this).find(".optType").val() === "select") {
            $(this).find(".optBlock").show();
            $(".optInput").tagsinput('refresh');
        } else {
            $(this).find(".optBlock").hide();
        }
    });

Answer 1

您正在传递$(".optType").val()而不是选择器，在事件处理程序中测试所选值并使用DOM关系遍历并定位所需元素。

$(repeatBlock).on('change', '.optType', function (e) {
    e.preventDefault();
    var val = $(this).val()
    if (val === "radio" || val === "select") {
        $(this).closest('tr').find(".optBlock").show();
        $(this).closest('tr').find(".optBlock").find(".optInput").tagsinput('refresh');
    } else {
        $(this).closest('tr').find(".optBlock").hide();
    }
});

＆＃13;

//****Repeat form field block****
var repeatBlock = "#tbody";
var repeatText = '<tr class="trRepeat">\n\
        <td>\n\
            <select class="optType" name="formOptionType[]">\n\
                <option value="">-------------------------------------</option>\n\
                <option value="text">Text</option>\n\
                <option value="textarea">Textarea</option>\n\
                <option value="select">Select Options (Dropdown)</option>\n\
                <option value="radio">Radio Buttons</option>\n\
                <option value="checkbox">Checkbox</option>\n\
            </select>\n\
            <div class="optBlock" style="display:none">\n\
                <label>Options:</label><br>\n\
                <input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput"/>\n\
            </div>\n\
        </td>\n\
        <td><label><input type="checkbox" name="fieldRequired[]"/> Required</label></td>\n\
        <td><a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">\n\
            <span class="glyphicon glyphicon-remove"></span></a>\n\
        </td></tr>';

$("#btn-addfield").click(function(e) {
  e.preventDefault();
  $(repeatBlock).append(repeatText);
});
$(repeatBlock).on('click', '.removeField', function(e) {
  e.preventDefault();
  $(this).parent().parent().remove();
});

$(repeatBlock).on('change', '.optType', function(e) {
  e.preventDefault();
  var val = $(this).val()
  if (val === "radio" || val === "select") {
    $(this).closest('tr').find(".optBlock").show();
   //$(this).closest('tr').find(".optBlock").find(".optInput").tagsinput('refresh');
  } else {
    $(this).closest('tr').find(".optBlock").hide();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-addfield">Addfield</button>
<table>
  <tbody id="tbody"></tbody>
</table>

＆＃13;

Answer 2

将td内的所有输入内容包含在otpBlock

中

 <tr class="trRepeat">
  <td>
    <select class="optType" name="formOptionType[]">
                    <option value="">-------------------------------------</option>
                    <option value="text">Text</option>
                    <option value="textarea">Textarea</option>
                    <option value="select">Select Options (Dropdown)</option>
                    <option value="radio">Radio Buttons</option>
                    <option value="checkbox">Checkbox</option>
                </select>
    <div class="optBlock" style="display:none">
      <label>Options:</label><br>
      <input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput" />
    </div>
  </td>
  <td>
    <div class="optBlock" style="display:none">
      <label><input type="checkbox" name="fieldRequired[]"/> Required</label>
     </div>
  </td>
  <td>
    <div>
      <a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">
        <span class="glyphicon glyphicon-remove"></span>Remove</a>
    </div>
  </td>
</tr>

使用以下JS

//****Show input field when dropdown/radio is selected****
$(repeatBlock).on('change', ".optType", function(e) {
  e.preventDefault();
  var type = $(this).val();   //Fetch the input type
  var container = $(this).closest('tr'); // Get the closest container
  container.find('.optBlock').hide(); // Hide all optBlock
  container.find('input').filter('[type=' + type + ']').closest('.optBlock').show(); // Show optBlock containing input of type.
});

要删除

$(repeatBlock).on('click', '.removeField', function(e) {
  e.preventDefault();
  $(this).closest('tr').remove(); // select the closest tr
});

<强>段

var repeatBlock = "#tbody";
var repeatText = '<tr class="trRepeat">\n\
  <td>\n\
    <select class="optType" name="formOptionType[]">\n\
                <option value="">-------------------------------------</option>\n\
                <option value="text">Text</option>\n\
                <option value="textarea">Textarea</option>\n\
                <option value="select">Select Options (Dropdown)</option>\n\
                <option value="radio">Radio Buttons</option>\n\
                <option value="checkbox">Checkbox</option>\n\
            </select>\n\
    <div class="optBlock" style="display:none">\n\
      <label>Options:</label><br>\n\
      <input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput" />\n\
    </div>\n\
  </td>\n\
  <td>\n\
   <div class="optBlock" style="display:none">\n\
  <label><input type="checkbox" name="fieldRequired[]"/> Required</label></div></td>\n\
  <td><div class=""><a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">\n\
            <span class="glyphicon glyphicon-remove"></span>Remove</a>\n\
  </div></td>\
</tr>';

$("#btn-addfield").click(function(e) {
  e.preventDefault();
  $(repeatBlock).append($(repeatText));
});
$(repeatBlock).on('click', '.removeField', function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
});

//****Show input field when dropdown/radio is selected****
$(repeatBlock).on('change', ".optType", function(e) {
  e.preventDefault();
  var type = $(this).val();
  var container = $(this).closest('tr');
  container.find('.optBlock').hide();
  container.find('input').filter('[type=' + type + ']').closest('.optBlock').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="tbody"></tbody>
</table>
<button id="btn-addfield">ADD</button>

在附加元素

2 个答案: