如何使单击链接填充出现在其前面的输入元素的值

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

本文关键字：前面 输入 元素 单击 何使 链接 填充      更新时间：2023-09-26

>我有以下内容：

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

有人可以告诉我我怎么能做到这一点。我只需要上面函数的更通用版本。.

我

建议，尽管目前未经测试：

$('.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的值指定为该input的value。
<小时 />

根据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() .

您可以使用.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'));
});

这应该可以解决问题...

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

我猜这和他们一样通用。我正在使用委托，因为我不知道你有多少这样的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老派来做。

$('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'));
});
相关文章：