javascript - 根据下拉框切换添加和删除html-6ren

javascript - 根据下拉框切换添加和删除html

转载作者：行者123 更新时间：2023-11-28 06:21:09

我正在尝试构建一个用于创建其他表单的表单。我填写了所有信息，它创建了一个存储在数据库中的 json 字符串。我已经构建了表单，并且可以动态添加多个表单字段。但是，我希望在更改下拉选择框中的字段类型时更改字段选项。例如，如果我选择字段类型“文本”，则只会出现“必填”复选框，但如果选择“选择”类型，则会出现“必填”复选框，并且会出现“选项”文本框。每个不同的选项都位于其自己的 div 容器内。我不想只是简单地隐藏和显示基于下拉选择的 div，因为我不希望在提交表单时发布空文本框或复选框。

我对 jQuery 很陌生。我可以使用 html 模板吗？如果是这样怎么办？我希望从此以后能做到这一点。我很乐意进一步解释。

<?php echo validation_errors(); ?>

<?php echo form_open(); ?>

    <div class="form-horizontal">

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#general" aria-controls="general" role="tab" data-toggle="tab">General</a></li>
            <li role="presentation"><a href="#fields" aria-controls="fields" role="tab" data-toggle="tab">Fields</a></li>
            <li role="presentation"><a href="#after_submit" aria-controls="after_submit" role="tab" data-toggle="tab">After Submit</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">

            <div class="html-container"></div>

            <br>

            <!-- GENERAL FORM INFO TAB -->
            <div role="tabpanel" class="tab-pane active" id="general">

                <div class="form-group">
                    <label for="name" class="col-sm-3 control-label">Name:</label>
                    <div class="col-sm-5">
                        <?php echo form_input('name', set_value('name', $form->name), 'class="form-control"'); ?>
                    </div>
                </div>

                <div class="form-group">
                    <label for="slug" class="col-sm-3 control-label">Slug:</label>
                    <div class="col-sm-5">
                        <?php echo form_input('slug', set_value('slug', $form->slug), 'class="form-control"'); ?>
                    </div>
                </div>

                <div class="form-group">
                    <label for="send_button_text" class="col-sm-3 control-label">Send Button Text:</label>
                    <div class="col-sm-5">
                        <?php echo form_input('send_button_text', set_value('send_button_text', $form->send_button_text), 'class="form-control"'); ?>
                    </div>
                </div>

                <div class="form-group">
                    <label for="save_entries" class="col-sm-3 control-label">Save Entries</label>
                    <div class="col-sm-5">
                        <label class="radio-inline">
                            <?php echo form_radio('save_entries', 'yes', set_value('save_entries', $form->save_entries)); ?> Yes
                        </label>
                        <label class="radio-inline">
                            <?php echo form_radio('save_entries', 'no', set_value('save_entries', $form->save_entries)); ?> No
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label for="is_public" class="col-sm-3 control-label">Public</label>
                    <div class="col-sm-5">
                        <label class="radio-inline">
                            <?php echo form_radio('is_public', 'yes', set_value('is_public', $form->is_public)); ?> Yes
                        </label>
                        <label class="radio-inline">
                            <?php echo form_radio('is_public', 'no', set_value('is_public', $form->is_public)); ?> No
                        </label>
                    </div>
                </div>

            </div> <!-- //..end of 'general' tab panel -->

            <!-- INPUT FIELDS TAB -->
            <div role="tabpanel" class="tab-pane" id="fields">

                <div class="repeat">

                    <div class="repeat-wrapper">

                        <div class="repeat-container">

                            <div class="repeat-template repeat-row">

                                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                                    <div class="panel panel-default">

                                        <div class="panel-heading" role="tab" id="heading{{row-count}}">

                                            <h3 class="panel-title pull-left">
                                                <span class="move"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></span>
                                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{row-count}}" aria-expanded="true" aria-controls="collapse{{row-count}}">
                                                    Panel title
                                                </a>
                                            </h3>
                                            <?php echo form_button('remove_field_button', '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove', 'class="remove btn btn-link pull-right"'); ?>
                                            <div class="clearfix"></div>

                                        </div>

                                        <div id="collapse{{row-count}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{row-count}}">
                                            <div class="panel-body">

                                                <div class="form-group form-group-sm">
                                                    <label for="inputs[{{row-count}}][name]" class="col-sm-2 control-label">Name:</label>
                                                    <div class="col-sm-5">
                                                        <?php echo form_input('inputs[{{row-count}}][name]', '', 'class="form-control"'); ?>
                                                    </div>
                                                </div>

                                                <div class="form-group form-group-sm">
                                                    <label for="inputs[{{row-count}}][label]" class="col-sm-2 control-label">Label:</label>
                                                    <div class="col-sm-5">
                                                        <?php echo form_input('inputs[{{row-count}}][label]', '', 'class="form-control"'); ?>
                                                    </div>
                                                </div>

                                                <div class="form-group form-group-sm">
                                                    <label for="inputs[{{row-count}}][type]" class="col-sm-2 control-label">Type:</label>
                                                    <div class="col-sm-3">
                                                        <?php echo form_dropdown('inputs[{{row-count}}][type]', $types, '', 'class="form-control input_type" data-counter="{{row-count}}"'); ?>
                                                    </div>
                                                </div>

                                                <div id="input_required_{{row-count}}" class="form-group input-type-show-hide">
                                                    <div class="col-sm-offset-2 col-sm-5">
                                                        <div class="checkbox">
                                                            <label>
                                                                <?php echo form_checkbox('inputs[{{row-count}}][required]', 'yes', ''); ?>
                                                                <?php echo form_checkbox('inputs[{{row-count}}][required]', 'no', ''); ?> Required
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>

                                                    <div id="input_options_{{row-count}}" class="row input-type-show-hide">

                                                        <div class="col-sm-offset-2 col-sm-10">

                                                            <table class="table repeat-wrapper">

                                                                <thead>
                                                                    <tr>
                                                                        <th>Label</th>
                                                                        <th>Value</th>
                                                                        <th></th>
                                                                    </tr>
                                                                </thead>

                                                                <tfoot>
                                                                    <tr>
                                                                        <td colspan="3">
                                                                            <div class="form-group">
                                                                                <div class="col-sm-12">
                                                                                    <?php echo form_button('add_option_button', 'Add Option', 'class="add btn btn-link"'); ?>
                                                                                </div>
                                                                            </div>                                                              
                                                                        </td>
                                                                        <td></td>
                                                                    </tr>
                                                                </tfoot>

                                                                <tbody class="repeat-container">

                                                                    <tr class="form-inline repeat-template repeat-row">

                                                                        <td>
                                                                            <div class="form-group form-group-sm">
                                                                                <label for="inputs[{{row-count}}][options][{{row-count}}][label]" class="sr-only">Label</label>
                                                                                <div class="col-sm-6">
                                                                                    <?php echo form_input('inputs[{{row-count}}][options][{{row-count}}][label]', '', 'class="form-control" placeholder="Label"'); ?>
                                                                                </div>
                                                                            </div>
                                                                        </td>

                                                                        <td>
                                                                            <div class="form-group form-group-sm">
                                                                                <label for="inputs[{{row-count}}][options][{{row-count}}][value]" class="sr-only">Value</label>
                                                                                <div class="col-sm-6">
                                                                                    <?php echo form_input('inputs[{{row-count}}][options][{{row-count}}][value]', '', 'class="form-control" placeholder="Value"'); ?>
                                                                                </div>
                                                                            </div>
                                                                        </td>

                                                                        <td>
                                                                            <span class="remove">Remove</span>
                                                                        </td>

                                                                    </tr> <!-- //..end of repeat-template for options -->

                                                                </tbody> <!-- //..end of repeat-container for options -->

                                                            </table> <!-- //..end of repeat-wrapper for options -->

                                                        </div>

                                                    </div>


                                                <div class="att_block_{{row-count}}"></div>

                                            </div> <!-- //..end of panel body -->

                                        </div> <!-- //..end of tabpanel -->

                                    </div> <!-- //..end of panel div -->

                                </div> <!-- //..end of panel group -->

                            </div> <!-- //..end of repeat-template -->

                        </div> <!-- //..end of repeat-container -->

                        <div class="form-group">
                            <div class="col-sm-12">
                                <?php echo form_button('add_field_button', 'Add Another', 'class="add btn btn-link"'); ?>
                            </div>
                        </div> <!-- //..end of 'add another' form-group -->

                    </div><!--  //..end of repeat-wrapper -->

                </div> <!-- //..end of repeat div -->

            </div> <!-- //..end of 'fields' tab panel -->

            <!-- AFTER SUBMIT TAB    -->
            <div role="tabpanel" class="tab-pane" id="after_submit">

                <div class="form-group">
                    <label for="email_recipients" class="col-sm-3 control-label">Email Recipients:</label>
                    <div class="col-sm-5">
                        <?php echo form_input('email_recipients', set_value('email_recipients', $form->email_recipients), 'class="form-control"'); ?>
                    </div>
                </div>

                <div class="form-group">
                    <label for="email_cc" class="col-sm-3 control-label">Email CC:</label>
                    <div class="col-sm-5">
                        <?php echo form_input('email_cc', set_value('email_cc', $form->email_cc), 'class="form-control"'); ?>
                    </div>
                </div>

                <div class="form-group">
                    <label for="email_bcc" class="col-sm-3 control-label">Email BCC:</label>
                    <div class="col-sm-5">
                        <?php echo form_input('email_bcc', set_value('email_bcc', $form->email_bcc), 'class="form-control"'); ?>
                    </div>
                </div>

                <div class="form-group">
                    <label for="email_subject" class="col-sm-3 control-label">Email Subject:</label>
                    <div class="col-sm-5">
                        <?php echo form_input('email_subject', set_value('email_subject', $form->email_subject), 'class="form-control"'); ?>
                    </div>
                </div>

                <div class="form-group">
                    <label for="email_message" class="col-sm-3 control-label">Email Message:</label>
                    <div class="col-sm-6">
                        <?php echo form_textarea('email_message', set_value('email_message', $form->email_message), 'class="tinymce"'); ?>
                    </div>
                </div>

                <div class="form-group">
                    <label for="after_submit_text" class="col-sm-3 control-label">After Submit Text:</label>
                    <div class="col-sm-6">
                        <?php echo form_textarea('after_submit_text', set_value('after_submit_text', $form->after_submit_text), 'class="tinymce"'); ?>
                    </div>
                </div>

                <div class="form-group">
                    <label for="return_url" class="col-sm-3 control-label">Return URL:</label>
                    <div class="col-sm-5">
                        <?php echo form_input('return_url', set_value('return_url', $form->return_url), 'class="form-control"'); ?>
                    </div>
                </div>

            </div> <!-- //..end of 'after_submit' tab panel -->

        </div>  <!-- //..end of tab-content  -->

        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-5">
                <?php echo form_submit('submit', 'Save', 'class="btn btn-default"'); ?>
            </div>
        </div>

    </div>

</form>

<script>
$(document).ready(function() {


$('#myTabs a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

tinymce.init({
    selector: ".tinymce",
    plugins: "code",
    toolbar: "undo redo | bold italic | bullist numlist | code",
    menubar: false
});

$('.repeat').each(function() {
    $(this).repeatable_fields({
        wrapper: '.repeat-wrapper',
        container: '.repeat-container',
        row: '.repeat-row',
        template: '.repeat-template',
        row_count_placeholder: '{{row-count}}'
    });
});

template = $("#test_html").clone();

template.appendTo(".html-container");

//$( ".html-container" ).append( $( "#test_html" ) );

$("body").on("change", ".input_type", function () {



});

});
</script>'

最佳答案

使用 jQuery hide() 方法隐藏要与表单一起提交的 DOM 部分，并使用 remove() 将它们完全删除DOM，从而阻止他们提交。

请参阅jQuery remove method

关于javascript - 根据下拉框切换添加和删除html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35517928/

文章推荐： javascript - 背景图像没有正确淡入

文章推荐： c++ - 使用图像/对象点计算投影矩阵

文章推荐： javascript - 在 Impress.js 轮播中面临问题

java - and 之间的区别
大家好，我看到了来自 java 项目中的 jsp 页面。想问一下这些html标签有什么区别。请多多指教。示例代码如下: 最佳答案使用struts-html标签库，其中只是普
html - HTML 页面中损坏的 HTML
我有一个页面，我正在从电子邮件中读取 HTML。有时，来自电子邮件的文本包含 HTML 和 CSS，它完全改变了我的页面样式。我不希望我的页面样式因此受到影响。我如何严格阅读特定 div(框)内的
html - HTML 中的图像 - HTML 表中行之间的间距
我知道有类似的问题，但我想对我的特定代码进行一些输入。我有一个图像，我将其切成 9 块，并创建了一个 3x3 HTML 表来显示它。但是我的表在行之间有空格，但在列之间没有空格。我没有使用任何 C
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 如何解析和规范化来自不同 HTML 生成器的 HTML？
这是 question 的扩展.我正在尝试解析嵌入在 Blogger 博客的 XML 备份中的 HTML 片段，并用 InDesign 标签重新标记它们。 Blogger 并未对其任何帖子的 HTML
html - html 元素之间的换行符破坏了 html 布局
我知道在 html 中元素之间的换行符被视为空格，但我认为当您尝试使用响应式布局时这非常可怕。例如，这里我们有预期和正确的行为，但要获得它，我必须删除元素之间的 html 中的换行符: https:
html - 将带有 html 标签的文本显示为 html
我正在尝试将文本文件显示为 html。我正在使用 ionic 。我正在发送一个 html 格式的响应，但在一个文本文件中发送到配置文件页面。它在 .ts 页面的变量名中。 @Component({
html - 如何在 html 中显示 html？
假设我有一个 html 文档: test 我想在浏览器中显示该代码。然后我会创建类似的东西: <html>test<html> 为了在中间制作 gubbins，我有一个函数
html - HTML 元素和 HTML 标签有什么区别？
HTML 元素和 HTML 标签有什么区别？渲染有什么区别吗？使用标签或元素时有什么特殊注意事项吗？最佳答案是一个标签，特别是一个开始标签也是一个标签，一个结束标签 This is a para
html - 降低 html 表格高度和过度滚动 - HTML
我有这个表格的模态形式。该表正在填充大量数据，但我不想分页。相反，我想以模式形式降低表格的高度并为表格添加溢出。下面是我的代码，但它不起作用。请问我该如何实现？ CSS #table{
html - 查看 HTML 代码而不是呈现的 HTML
我记得有一个 Linux 命令可以从给定的 URL 返回 HTML 代码。您可以将 URL 作为此命令的参数，然后返回 HTML 代码，而不是在浏览器中输入 URL。哪个命令执行此操作？最佳答案
html - 在 html 中显示 html
我有一个 html 页面，我想在其中包含另一个有很多链接的 html 页面。我能够使用 iframe 实现它，但我希望 iframe 内的页面具有与原始页面相同的文本和链接颜色属性，我不想要滚动条，我
html - 如何从另一个 HTML 加载部分 HTML？
我正在使用 HTML 写一本书。如果我把它写在一个 html 文件中，整个代码就会变长，所以我想将每一章保存到不同的文件中，然后将它们加载到主 html 中。我的意思是有像 chapter1.html
html - 将 html 页面重定向到另一个 html
在显示之前，我必须将一个网站重定向到另一个网站。我试过使用 .htaccess，但它给我带来了问题。我也使用过 javavscript 和 meta，但在加载我要从中传输的页面之前它不起作用。帮助？
html - 将网页 html 转换为电子邮件 html
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 7 年前。
html - 使用 html 打印 ""
如何打印“html”标签，包括“”？如何在不使用文本区域和 Javascript 的情况下对任何标签执行此操作？最佳答案使用HTML character references : <html
html - 如何将 html.slim 文件转换为 html 或 html.erb？
我需要将 Ruby on Rails 应用程序中的 html.slim 文件转换为 html.erb。有什么简单的方法吗？我尝试了 Stack Overflow 和其他网站中列出的许多选项。但对我没有
html - 没有标签可以创建 HTML 文档吗？
这个问题在这里已经有了答案: Is it necessary to write HEAD, BODY and HTML tags? (6 个答案) 关闭 8 年前。我在 gitHub 上找到了这个
html - 什么是加载外部资源的 HTML 元素列表？ (HTML 电子邮件)
如果不允许通过 JavaScript 进行额外的 DOM 操作，我正在寻找可以加载外部资源的元素列表。我正在尝试使用 HTML 查看器托管来自第三方的电子邮件，当发生这种情况时，我需要删除任何自动加载

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 根据下拉框切换添加和删除html