JQUERY / HTML - показать / скрыть содержимое после выбора значения в раскрывающемся списке

Question

Я хочу показать свой контент после выбора значения в раскрывающемся здесь списке: Personal, который при выборе контента изменится.но то, что у меня есть в содержании, это hide, поэтому, когда я просто выбираю значение в раскрывающемся списке, то время, в которое контент будет отображаться.

my Dropdown

  <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 идентификатора

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

Попробуйте исправить это и снова запустите код.Все, что вам нужно сделать, это просто удалить идентификатор sectiontohide, потому что другой уже используется.

Надеюсь, это поможет!

Answer 2

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

Answer 3

вам нужно использовать что-то вроде этого var select_status = $ (this) .val ();