How can I make clicking a link populate a value of an input element that appears before it?

Question

I have the following:

<div class="btn-group">
    <input disabled="disabled" id="dialogType">
    <button data-toggle="dropdown" class="dropdown-toggle">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="towns">
        <li><a data-value="0Z" href="#">A</a></li>
        <li><a data-value="10" href="#">B</a></li>
    </ul>
</div>

<div class="btn-group">
    <input disabled="disabled" id="dialogStatus">
    <button data-toggle="dropdown" class="dropdown-toggle">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="places">
        <li><a data-value="22" href="#">C</a></li>
        <li><a data-value="33" href="#">D</a></li>
    </ul>
</div>

In the past I used the following javascript to populate the #town label field when one of the links is clicked:

$('#towns > li > a').click(function (e) {
    e.preventDefault();
    $('#town').text($(this).html())
 });

Now I would like to make this javascript work for any similar ul that's inside of a DIV with the class dropdown-menu.

So what I would like is:

• When the user clicks on a link such as A then the first input element inside the btn-group is given the value of A and also a data-value of "0Z"
• When the user clicks on a link such as D then the first input element inside that btn-group is given the value of D and also a data-value of "33"

Can someone tell me how I could do this. I just need a more generic version of the function above. .

Answer 1

I'd suggest, though currently untested:

$('.dropdown-menu a').click(
    function(e){
        e.preventDefault();
        var that = $(this),
            dValue = that.attr('data-value');
        that.closest('.btn-group').find('input:first').attr('data-value',dValue).val(dValue);
    });

Essentially the way this works is:

1. clicking the link prevents the default action,
2. finds the closest .btn-group (ancestor) element,
3. finds the first descendant input element within,
4. assigns the data-value (assigned to the dValue variable) to the data-value attribute of that input , and finally
5. assigns the value of dValue to be the value of that input .

---

Edited in response to comment left by OP:

...I will have more HTML with button groups loaded with Ajax. Sorry I should have said that. Because of that should I also use "on"...

Because the btn-group elements are added dynamically, I'd suggest the following change:

$('#idOfBtnGroupParentElement').on('click','.dropdown-menu a',
    function(e){
        e.preventDefault();
        var that = $(this),
            dValue = that.attr('data-value');
        that.closest('.btn-group').find('input:first').attr('data-value',dValue).val(dValue);
    });

References:

• attr() .
• closest() .
• find() .
• on()
• val() .

Answer 2

You can use .closest to find the closest parent of the clicked element, that matches a given selector.

For setting the value of an input, use .val , for setting a data property, use .data

$('.btn-group a').click(function(e) {
   e.preventDefault();
   var input = $(this).closest('.btn-group').find('input');

   input.val($(this).html());
   input.data('value', $(this).data('value'));
});

Answer 3

this should do the trick...

$(".dropdown-menu a").click(function(e){
   e.preventDefault();

   var value = $(this).data("value");
   var text = $(this).html();

   var input = $(this).parents(".btn-group").find("input");

   input.data("value", value);
   input.val(text);
});

Answer 4

This is about as generic as they go, I guess. I'm using delegates because I don't know how many of these a elements you've got.

$('.btn-group').on('click', '.dropdown-menu a', function (e) {

    var $this = $(this),
        $input = $this.closest('.btn-group').find('input:first')
        ;
    e.preventDefault();

    $input.val($this.html())
          .attr('data-value', $this.attr('data-value'))
          ;        
});

Do take note that I'm using .on , so you should be using jQuery 1.7 or higher to use that. If not, take a look at how to do it old school with delegate .

Answer 5

$('ul.dropdown-menu a').on('click', function(e) {
  e.preventDefault();
  $(this).parent().parent().parent().find('input:first').val($(this).text()).attr('data-value', $(this).attr('data-value'));
});