Как я могу щелкнуть ссылку, чтобы заполнить значение элемента ввода, который появляется перед ним?

Question

У меня есть следующий:

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

В прошлом я использовал следующий JavaScript для заполнения поля #town метки, когда одна из ссылок щелкнули:

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

Теперь я хотел бы сделать этот javascript работает для любой подобной ul, которая находится внутри DIV с выпадающим меню класса.

Так что я хотел бы это:

• Когда пользователь нажимает на ссылку, такие как А, то первый входной элемент внутри БТН-группы задается значение A, а также данных стоимости «0Z»
• Когда пользователь нажимает на ссылку, такие как D, то первый входной элемент внутри этой БТН-группы задается значение D, а также данных, значение «33»

Может кто-то скажи мне, как я могу это сделать. Мне просто нужна более общая версия функции выше. .

Answer 1

Я хотел бы предложить, хотя в настоящее время непроверены:

$('.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); 
    }); 

По существу, как это работает:

1. нажав на ссылку предотвращает действие по умолчанию,
2. находит ближайший .btn-group элемент (предок),
3. находит первый потомок input элемент внутри,
4. назначает data-value (присваивается переменной dValue) к атрибуту data-value этого input и, наконец,
5. присваивает значение dValuevalueinput.

---

Отредактировано в ответ на комментарий, оставленный OP:

... у меня будет больше HTML с кнопкой группы нагруженных Ajax. Извините, мне следовало это сказать. Из-за этого я также должен использовать «on» ...

Поскольку btn-group элементы добавляются динамически, я хотел бы предложить следующее изменение:

$('#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); 
    }); 

Ссылки:

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

Answer 2

Вы можете использовать .closest, чтобы найти ближайшего родителя элемента clicked, который соответствует данному селектору.

Для установки значения входа используйте .val, для установки свойства данных, используйте .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

это следует сделать трюк ...

$(".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

Это примерно так же важно, как и они, я думаю. Я использую делегатов, потому что я не знаю, сколько из этих a элементов у вас есть.

$('.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')) 
      ;   
}); 

ли принять к сведению, что я использую .on, так что вы должны использовать JQuery 1.7 или выше, чтобы использовать это. Если нет, посмотрите, как это сделать в старой школе с 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')); 
});