Question

我想在这里的下拉菜单中选择值后显示我的内容，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>

Answer 1

您的div有2个ID

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

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

希望有帮助！

Answer 2

您需要使用类似这样的内容 var select_status = $（this）.val（）;

Answer 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>

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

3 个答案: