我想动态更改页面上表单的内容答案

【问题标题】：I want to dynamically change the content of the form on my page我想动态更改页面上表单的内容
【发布时间】：2022-11-12 15:32:11
【问题描述】：

我有一个 Laravel 8 项目。我为这个项目添加了三个新标签。目前，总共有五个标签，如下所示。

-> Normal Tag
-> Main Feed Tag
-> Collection Tag
-> Brand Tag
-> Non-Payout Tag

有一个页面叫标签列表我们根据标签列出内容。此页面具有编辑和创建功能。例如，当我进入编辑部分时，我希望编辑页面内容中的表单根据选中的标签动态变化。

例如下图中选择了品牌标签，所以我用红色标记的区域应该添加到编辑页面的表单中。但除此之外，这个区域不应该是可见的。

目前，我在下面的代码区域中分享与此问题相关的编辑页面区域。

编辑刀片.php

<div class="col-lg-3">
  {{ Form::label('isMainTag','Is Main Tag', 'Collection Tag', 'Brand Tag')  }} 
  <select name="tags[isMainPage]" class="form-control form-control-sm" onchange="showDiv(this)">
    <option @if($tag->isMainPage==0) selected @endif value="0">Normal Tag</option>
    <option @if($tag->isMainPage==1) selected @endif value="1">Main Feed Tag</option>
    <option @if($tag->isMainPage==2) selected @endif value="2">Collection Tag</option>
    <option @if($tag->isMainPage==3) selected @endif value="3">Brand Tag</option>
    <option @if($tag->isMainPage==4) selected @endif value="4">Non-Payout Tag</option>
  </select>
</div>


                            <div class="col-lg-12 my-5" id="dynamic_brand_form">
                                <div class="row">
                                    <div class="col-lg-3">
                                        {{ Form::label('name','Brand Name')  }}
                                        {{ Form::textarea('fields[brand_name]',$tag->getField('brand_name'),["class"=>"form-control form-control-sm","placeholder"=>"Brand Name"]) }}
                                    </div>
                                    <div class="col-lg-3">
                                        {{ Form::label('description','Brand Description')  }}
                                        {{ Form::textarea('fields[brand_description]',$tag->getField('brand_description'),["class"=>"form-control form-control-sm","placeholder"=>"Brand Description"]) }}
                                    </div>
                                    <div class="col-lg-3">
                                        {{ Form::label('logo','Brand Logo')  }}
                                        {{ Form::file('file_fields[brand_logo]',["class"=>"form-control form-control-sm",'accept'=>'.png,.jpg,.jpeg']) }}
                                        @if($tag->getField('brand_logo')!=null)
                                            <div class="mt-2 text-center">
                                                <p>Current Logo</p>
                                                <img src="{{ $tag->getField('brand_logo')}}" height="100" width="100">
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

edit.blade.php 部分（'脚本'）

    <script>

        function showDiv(select){
            if(select.value == "3"){
                $("#dynamic_brand_form").show();            
            } 
            else{
                $("#dynamic_brand_form").hide();            
            }
        } 
    </script>

我如上所述编写了JS代码，但没有成功。我在哪里做错了？

【问题讨论】：

. 是一个类选择器，但你的 HTML 有 id="dynamic_brand_form"，所以 .dynamic_brand_form 找不到它。仔细看看api.jquery.com/category/selectors。然后尝试改用$("#dynamic_brand_form")。
@ADyson是的，你选择一个id是对的，我在那部分犯了一个错误，但我按照你说的更新了我的代码，但我仍然无法得到结果。它可能来自其他地方吗？
从代码中看不是很明显。你做了什么调试？尝试运行 showDiv 后，打开浏览器的开发人员工具并在控制台中查找错误。如果没有错误，则在 showDiv 函数中添加一些 console.log() 命令，和/或使用内置调试器来检查 showDiv 函数是否在您期望的时候执行，并且 @ 987654332@ 包含您所期望的。
如果您遇到（相关）错误，并且经过一些研究后您无法理解它们，edit 您的帖子将在此处显示错误。

标签： javascript php html jquery laravel

【解决方案1】：

我通过转换下面的 JS 代码解决了我的问题。

            $('[name="tags[isMainPage]"]').change(function(){
                var select = $(this).val();

                if(select == "3"){
                    $("#dynamic_brand_form").show();
                    $("#dynamic_collection_form").hide();            
                }
                else if(select == "2"){
                    $("#dynamic_brand_form").hide();            
                }
            }).trigger('change');

【讨论】：