مشکل در انتخاب آیتم های DropDown مربوط به بوت استرپ

[پیام حیاتی]

سلام

چرا بعد از انتخاب آیتم های drop بوت استرپ دوباره همان مقدار اولیه نمایش داده می شود؟!

<div class="form-group">

                         <div class="dropdown">

                           <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">انتخاب کنید

                           <span class="caret"></span></button>

                           <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="menu1" style="text-align:right">

                             <li role="presentation"><a role="menuitem" tabindex="-1" href="#">استاد</a></li>

                             <!-- <li role="presentation" class="divider"></li>  -->

                             <li role="presentation"><a role="menuitem" tabindex="-1" href="#">دانشجو</a></li>

                           </ul>

                         </div> 
                    </div>

مثال های w3scholls هم بدین شکل هستند!
http://www.w3schools.com/bootstrap/b..._dropdowns.asp

[amir]

سلام

این آیتم های drop مثل المنت select , option کار نمیکنن... در واقع چیزی شبیه به منو های درختی هستن و همینجوری عوض کردنشون باعث نمیشه که متنش عوض شه

برای اینکه اون متن هم عوض بشه باید یه کد جیکوئری هم بهش اضافه کرد

$(document).ready(function(){
    $('[role="presentation"] a').on('click', function(){
        $newText = $(this).text();
        $('.dropdown-toggle').html($newText + '<span class="caret"></span>');
    });
});