Javascript 如何使单击链接填充显示在其前面的输入元素的值？

我有以下资料：

<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适用于任何类似的ul，它位于带有类下拉菜单的DIV中

所以我想说的是：

• 当用户单击链接（如a）时，btn组内的第一个输入元素的值为a，数据值为“0Z”
• 当用户点击诸如D之类的链接时，该btn组内的第一个输入元素被赋予值D和数据值“33”

有人能告诉我怎么做吗。我只需要上面函数的一个更通用的版本。

---

.

您可以使用

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

---

您可以使用

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

---

这应该可以解决问题

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

---

我建议，尽管目前尚未测试：

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

基本上，其工作方式是：

单击链接可阻止默认操作

查找最近的

.btn组

（祖先）元素

在中查找第一个子体

input

元素

将

数据值

（分配给

d值

变量）分配给该

输入

的

数据值

属性，最后

将

d值

的值指定为该

输入的
值

---

针对OP留下的评论进行编辑：

…我将有更多的HTML和用Ajax加载的按钮组。对不起，我应该这么说。因此，我也应该使用“on”

由于

btn组

元素是动态添加的，因此我建议进行以下更改：

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

参考资料：

---

我建议，尽管目前尚未测试：

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

基本上，其工作方式是：

单击链接可阻止默认操作

查找最近的

.btn组

（祖先）元素

在中查找第一个子体

input

元素

将

数据值

（分配给

d值

变量）分配给该

输入

的

数据值

属性，最后

将

d值

的值指定为该

输入的
值

---

针对OP留下的评论进行编辑：

…我将有更多的HTML和用Ajax加载的按钮组。对不起，我应该这么说。因此，我也应该使用“on”

由于

btn组

元素是动态添加的，因此我建议进行以下更改：

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

参考资料：

---

我想，这大概和它们的通用性一样。我使用委托是因为我不知道您拥有多少

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

---

请注意，我在上使用的是

，因此您应该使用jquery1.7或更高版本来使用它。如果没有，请看一看如何使用
委派
这是一种老派的做法，我想这大概是他们的一般做法。我使用委托是因为我不知道您拥有多少
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'))
          ;        
});

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

请注意，我在
上使用的是
，因此您应该使用jquery1.7或更高版本来使用它。如果没有，请看一看如何与
代表一起做这件事。非常感谢。你能告诉我这样做的原因吗：var$this=$（this）？还有一个问题。我会在我的页面底部的一个文件内准备好这个。但是，使用ajax可以重新加载btn组的代码。当您使用“on”时，这是否仍然适用于加载到页面上的新HTML？您将
$（this）
的结果缓存到一个变量中，这样您就不必执行多次计算。每个
$（this）
调用一个函数，我们希望尽可能减少函数开销。jQuery很快，但在编写代码时最好进行这样的优化：至于第二个问题，如果动态加载
.btn组
元素本身，则必须将委托选择器提升到更高级别。例如，如果您的
.btn组
元素正在加载到
#menus
元素中，并且该元素是静态的，那么您需要修改我的答案以读取
$（'#menus'）。改为（'click'，'.btn group.dropdown menu a'，function（）{}）
。非常感谢。你能告诉我这样做的原因吗：var$this=$（this）？还有一个问题。我会在我的页面底部的一个文件内准备好这个。但是，使用ajax可以重新加载btn组的代码。当您使用“on”时，这是否仍然适用于加载到页面上的新HTML？您将
$（this）
的结果缓存到一个变量中，这样您就不必执行多次计算。每个
$（this）
调用一个函数，我们希望尽可能减少函数开销。jQuery很快，但在编写代码时最好进行这样的优化：至于第二个问题，如果动态加载
.btn组
元素本身，则必须将委托选择器提升到更高级别。例如，如果您的
.btn组
元素正在加载到
#menus
元素中，并且该元素是静态的，则需要将我的答案修改为
$（'#menus'）。on（'click'，'.bt'）
$('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'));
});