使用jquery根据所选文本显示和隐藏html元素答案

【问题标题】：Show & hide html element based on selected text using jquery使用jquery根据所选文本显示和隐藏html元素
【发布时间】：2022-01-21 18:16:06
【问题描述】：

如果所选文本不是“超级管理员”，我想设置属性名称并显示选择选项，如果所选文本是“超级管理员”，我想取消设置属性名称并隐藏选择选项。

 <div class="form-group">
   <select id="role_user" name="role" class="form-control" required>
    <option value="">Select role user</option>
    <option value="Admin">Admin</option>
    <option value="Supervisor">Supervisor</option>
     <option value="Super Admin">Super Admin</option>
    </select>
</div>

我要显示和隐藏的元素：

<div class="form-group" id="company" style="display: none">
     <label>Company</label>
     <select id="company_i" class="form-control">
        <option value="">Select Company</option>
         @foreach ($company as $cp)
         <option value="{{ $cp->id }}">{{ $cp->name }}</option>
         @endforeach
     </select>
</div>

JQuery 代码：

$(document).ready(function() {
                $('#role_user').change(function() {
                    if ($('#role_user option:selected').text() != "Super Admin") {
                        $('#company').show();
                        $('#company_i').attr('name', 'company_id');
                    } else if ($('#role_user option:selected').text() == "Super Admin") {
                        $('#company').hide();
                        $('#company_i').removeAttr("name");
                    }
                })
            });

我已经使用上面的代码进行了尝试，但只有 set & remove name 属性有效。显示和隐藏不起作用。

【问题讨论】：

奇数。我认为代码似乎还可以。您的console.log 中是否记录了任何内容？您的网站上是否有可能有另一个 id="company" 字段？（真的只是在黑暗中的狂野刺伤）
您可以尝试用$('#company').css('display', 'block'); 代替show() 和$('#company').css('display', 'none'); 代替hide()。也许这会有所作为
我是男人中的神
@Catto id 必须是唯一的 - developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
@mk21 感谢您的评论，是的，我知道。我只是没有意识到这一点，因为我正在使用刀片模板引擎，并且每个部分都包含在不同的文件中（我只关注 1 个文件，这是我的错）

标签： html jquery

【解决方案1】：

$(document).ready(function () {
    $('#role_user').change(function () {
        if ($(this).val() != "Super Admin") {
            $('#company').show();
            $('#company_i').attr('name', 'company_id');
        } else {
            $('#company').hide();
            $('#company_i').removeAttr("name");
        }
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <select id="role_user" name="role" class="form-control" required>
        <option value="">Select role user</option>
        <option value="Admin">Admin</option>
        <option value="Supervisor">Supervisor</option>
        <option value="Super Admin">Super Admin</option>
    </select>
</div>

<div class="form-group" id="company" style="display: none">
    <label>Company</label>
    <select id="company_i" class="form-control">
        <option value="">Select Company</option>
    </select>
</div>

【讨论】：