JQUERY/HTML - 在下拉列表中选择值后显示/隐藏内容答案

【问题标题】：JQUERY/HTML - show/hide content after selecting value in dropdownJQUERY/HTML - 在下拉列表中选择值后显示/隐藏内容
【发布时间】：2019-05-06 15:43:26
【问题描述】：

我想在此处的下拉列表中选择值后显示我的内容我所拥有的是Personal，如果您选择内容将会改变。但我的内容是hide，所以当我在下拉列表中选择一个值时，即显示内容的时间。

我的下拉菜单

  <select name="messagetype" id="messagetype" class="selectpicker" data-style="select-with-transition" title="News Type" data-size="7" onchange="fun_showtextbox()">
                                            <option disabled="">Select Receipt</option>
                                            <option value="All">Send to all</option>
                                            <option value="Personal">Send to Personal</option>

                                        </select>

我的内容div

<div id="sectiontohide" style="display:none;" id="mobileno_textbox">
      <p>Show Content</p>
</div

我的 Javascrip/Jquery

<script type="text/javascript">

        function fun_showtextbox(){

        var select_status=$('#messagetype').val();

                if(select_status == 'Personal')
                {
                        $('#mobileno_textbox').show();        
                }
                else
                {
                        $('#mobileno_textbox').hide();
                }
        }

</script>

我的链接

<script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>

【问题讨论】：

你的代码有什么问题？
当我选择值没有变化时不显示内容，不显示内容

标签： javascript jquery html ajax laravel

【解决方案1】：

你的 div 有 2 个 id

<div id="sectiontohide" style="display:none;" id="mobileno_textbox">
  <p>Show Content</p>
</div>

尝试修复该问题，然后再次运行代码。您需要做的只是删除sectiontohide id，因为另一个ID 已被使用。

希望有帮助！

【讨论】：

哈哈，我在嘲笑它。谢谢先生 :) 没注意到有人来了哈哈
别担心，我们最好的人都会遇到这种情况！

【解决方案2】：

你需要使用这样的东西 var select_status = $(this).val();

【讨论】：

【解决方案3】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
$(document).ready(function(){

$('#messagetype').on('change', function() {

if(this.value=="Personal")
{

$('#mobileno_textbox').show();  
}
else
{

   $('#mobileno_textbox').hide();  
}
});

});
</script>


<select name="messagetype" id="messagetype" class="selectpicker" data-style="select- 
with-transition" title="News Type" data-size="7" >
                                        <option disabled="">Select Receipt</option>
                                        <option value="All">Send to all</option>
                                        <option value="Personal">Send to 
Personal</option>

                                    </select>
<div style="display:none"  id="mobileno_textbox"> <p>Show Content</p></div>

【讨论】：