0

There are a number of questions on SO asking how to set the value of a selected dropdown, such as How to Display Selected Item in Bootstrap Button Dropdown Title. This works great, until you add a 2nd (or 3rd...) dropdown to the page. What then happens is that selecting a value on dropdown A will set that value on dropdown B and C as well...

Here's my fiddle 

$(".dropdown-menu li a").click(function () {
    var item = $(this).text();        
    $(".btn:first-child").text(item);
    $(".btn:first-child").val(item);    
});

The current selector is selecting all dropdowns.. wheras what's needed is to select the button within the selected dropdowns button group, or traversing via parents, both of which I've failed to work out.

Any help appreciated.

Community
  • 1
  • 1
Fetchez la vache
  • 4,940
  • 4
  • 36
  • 55

2 Answers2

1

You are searching for all buttons when you have $(".btn:first-child")

you need to be relative to your current element:

 $(".dropdown-menu li a").click(function () {
    var item = $(this).text();        
    $(this).closest(".btn-group").find(".btn:first-child").text(item);
    $(this).closest(".btn-group").find(".btn:first-child").val(item);
});
ChrisThompson
  • 1,998
  • 12
  • 17
1

You need to select the btn in the row where you clicked the link. This is how to select the row according to your html

$(".dropdown-menu li a").click(function () {
    var item = $(this).text();   
    var current_row = $(this).parent().parent().parent().parent().parent();
    var current_btn = $(current_row).find(".btn:first-child");

 console.log($(current_row));     
    $(current_btn).text(item);
    $(current_btn).val(item);

});

Med
  • 2,035
  • 20
  • 31