如何使单击链接填充出现在它之前的输入元素的值？

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 适用于 DIV 内的任何类似的 ul 类下拉菜单。

所以我想要的是：

• 当用户单击 A 等链接时，btn 组内的第一个输入元素将被赋予 A 的值以及“0Z”的数据值
• 当用户点击诸如 D 之类的链接时，该 btn 组内的第一个输入元素将被赋予 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变量）分配给input的data-value属性，最后
5. 将dValue 的值指定为value 的input。

---

已编辑以回应 OP 留下的评论：

...我将有更多带有 Ajax 加载的按钮组的 HTML。对不起，我应该这么说。因此，我是否也应该使用“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 查找与给定选择器匹配的被点击元素的最近父级。

要设置输入的值，请使用.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'));
});