Javascript 显示/隐藏附加元素内的输入字段

我有以下JS/jQuery代码将行追加到现有表中。附加后，我只想在选择“select”或“radio”作为选项类型时显示输入字段

添加多行时，输入字段的外观/消失取决于添加的第一行。我希望它仅在选择了两个选项中的任何一个的行上显示/隐藏

希望这是有道理的。任何建议都会有帮助。谢谢

HTML:

输入类型
要求
行动
-------------------------------------
正文
文本区域
选择选项（下拉列表）
单选按钮
复选框
选项：

要求的

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();
        }
    });

//****重复表单字段块****
var repeatBlock=“#tbody”；
var repeatText='\n\
\n\
\n\
-------------------------------------\n\
文本\n\
text区域\n\
选择选项（下拉菜单）\n\
单选按钮\n\
复选框\n\
\n\
\n\
选项：
\n\
\n\
\n\
\n\
必需的\n\
\n\
';
$（“#btn添加字段”）。单击（函数（e）{
e、 预防默认值（）；
$（repeatBlock）.append（repeatText）；
});
$（repeatBlock）.on（'click'，'removeField'，函数（e）{
e、 预防默认值（）；
$（this.parent（）.parent（）.remove（）；
});
//****选择下拉菜单/收音机时显示输入字段****
$（repeatBlock）.on（'change'，$（.optType”）.val（），函数（e）{
e、 预防默认值（）；
if（$（this）.find（“.optType”）.val（）==”radio“| |$（this）.find（“.optType”）.val（）==”select“）{
$（this.find（“.optBlock”）.show（）；
$（“.optInput”）.tagsinput（'refresh'）；
}否则{
$（this.find（“.optBlock”）.hide（）；
}
});

您正在传递

$（“.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();
    }
});

//****重复表单字段块****
var repeatBlock=“#tbody”；
var repeatText='\n\
\n\
\n\
-------------------------------------\n\
文本\n\
text区域\n\
选择选项（下拉菜单）\n\
单选按钮\n\
复选框\n\
\n\
\n\
选项：
\n\
\n\
\n\
\n\
必需的\n\
\n\
';
$（“#btn添加字段”）。单击（函数（e）{
e、 预防默认值（）；
$（repeatBlock）.append（repeatText）；
});
$（repeatBlock）.on（'click'，'removeField'，函数（e）{
e、 预防默认值（）；
$（this.parent（）.parent（）.remove（）；
});
$（repeatBlock）.on（'change'，'optType'，函数（e）{
e、 预防默认值（）；
var val=$（this.val（）
如果（val==“收音机”| val==“选择”）{
$（this）.closest（'tr'）.find（'optBlock'）.show（）；
//$（this）.closest（'tr'）.find（'optBlock'）.find（'optInput'）.tagsinput（'refresh'）；
}否则{
$（this）.closest（'tr'）.find（'optBlock'）.hide（）；
}
});

阿德菲尔德
您正在传递
$（“.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();
    }
});


//****重复表单字段块****
var repeatBlock=“#tbody”；
var repeatText='\n\
\n\
\n\
-------------------------------------\n\
文本\n\
text区域\n\
选择选项（下拉菜单）\n\
单选按钮\n\
复选框\n\
\n\
\n\
选项：
\n\
\n\
\n\
\n\
必需的\n\
\n\
';
$（“#btn添加字段”）。单击（函数（e）{
e、 预防默认值（）；
$（repeatBlock）.append（repeatText）；
});
$（repeatBlock）.on（'click'，'removeField'，函数（e）{
e、 预防默认值（）；
$（this.parent（）.parent（）.remove（）；
});
$（repeatBlock）.on（'change'，'optType'，函数（e）{
e、 预防默认值（）；
var val=$（this.val（）
如果（val==“收音机”| val==“选择”）{
$（this）.closest（'tr'）.find（'optBlock'）.show（）；
//$（this）.closest（'tr'）.find（'optBlock'）.find（'optInput'）.tagsinput（'refresh'）；
}否则{
$（this）.closest（'tr'）.find（'optBlock'）.hide（）；
}
});

阿德菲尔德
将所有输入内容包装在
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>

删除

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

片段


var repeatBlock=“#tbody”；
var repeatText='\n\
\n\
\n\
-------------------------------------\n\
文本\n\
text区域\n\
选择选项（下拉菜单）\n\
单选按钮\n\
复选框\n\
\n\
\n\
选项：
\n\
\n\
\n\
\n\
\n\
\n\
必需的\n\
\n\
\
';
$（“#btn添加字段”）。单击（函数（e）{
e、 预防默认值（）；
$（repeatBlock）.append（$（repeatText））；
});
$（repeatBlock）.on（'click'，'removeField'，函数（e）{
e、 预防默认值（）；
$（this）.closest（'tr'）.remove（）；
});
//****选择下拉菜单/收音机时显示输入字段****
$（repeatBlock）.on（'change'，“.optType”，函数（e）{
e、 预防默认值（）；
var type=$（this.val（）；
var container=$（this）.closest（'tr'）；
container.find（'.optBlock'）.hide（）；
container.find（'input'）.f
$(repeatBlock).on('click', '.removeField', function(e) {
  e.preventDefault();
  $(this).closest('tr').remove(); // select the closest tr
});