I want to change Bootstrap dropdown item select with jQuery? I'm newbie in jQuery. I put dropdown list data from database with foreach loop. and I've a button. that have "id" and "value". When I click on that button, i want to change my bootstrap dropdown 'li' selected item to it button's "vaule" and "id".Please help me.

<div class="dropdown" align="right">
    <input type="button" id="select_staff" class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" value="<?php echo $cur_admin_name ?> ▼">
    <ul id="admin_cal_list" class="dropdown-menu dropdown-menu-right">
    <input type="hidden" id="admin_id" class="form-control">
        <?php foreach ($admin_name as $admin_list): ?>
            <li id="<?php echo $admin_list["interview_plan_staff_id"]; ?>"><a href="#"><?php echo $admin_list["interview_plan_staff_name"]; ?></a></li>
        <?php endforeach; ?>
    </ul>
</div>

I want to change Bootstrap dropdown item select with jQuery? I'm newbie in jQuery. I put dropdown list data from database with foreach loop. and I've a button. that have "id" and "value". When I click on that button, i want to change my bootstrap dropdown 'li' selected item to it button's "vaule" and "id".Please help me.

<div class="dropdown" align="right">
    <input type="button" id="select_staff" class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" value="<?php echo $cur_admin_name ?> ▼">
    <ul id="admin_cal_list" class="dropdown-menu dropdown-menu-right">
    <input type="hidden" id="admin_id" class="form-control">
        <?php foreach ($admin_name as $admin_list): ?>
            <li id="<?php echo $admin_list["interview_plan_staff_id"]; ?>"><a href="#"><?php echo $admin_list["interview_plan_staff_name"]; ?></a></li>
        <?php endforeach; ?>
    </ul>
</div>

• javascript
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow edited Mar 1, 2017 at 8:42 Barry Michael Doyle 10.7k3333 gold badges9898 silver badges159159 bronze badges asked Mar 1, 2017 at 4:07 Kyaw Zin WaiKyaw Zin Wai 45755 gold badges1010 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Like this..

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  console.log( selText);
  $(this).parents('.dropdown').find('.dropdown-toggle').val(selText);
});

Demo: http://www.bootply./EuFKxaQ2bO

I'm not sure I 100% understand what you are trying to do. For clarity, you want the li to change to the button's id and value? If so try this:

    $(".dropdown-menu li a").click(function(){
    document.getElementById("admin_cal_list").innerHTML = $(".dropdown-toggle").attr("id") + " " + $(".dropdown-toggle").attr("value");
});

Demo: http://www.bootply./UphW5kYtwE