Question

我有一个像这样的HTML代码：

<input type="text" class="form-control" id="txtCopyright" placeholder="IN" />

<div class="input-group-btn nopadding">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"  style="border-radius:0"><span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right" id="myDropdown" role="menu">
    <li><a>IN</a></li>
    <li><a>BEFORE</a></li>
    <li><a>AFTER</a></li>
    </ul>
</div>

其他输入组

<input type="text" class="form-control" id="txtOtherInput" placeholder="Other" />

<div class="input-group-btn nopadding">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"  style="border-radius:0"><span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right" id="myDropdown2" role="menu">
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    </ul>
</div>

我有一个像这样的jQuery ..

$('#myDropdown li').click(function () {
    $('#txtCopyright').val($(this).text());
});

$('#myDropdown2 li').click(function () {
   $('#txtOtherInput').val($(this).text());
});

它实际上在我身上工作..但问题是我想在我的所有下拉列表中只使用一个jQuery ..它现在很容易使用，因为我只有2下拉什么如果我有20下拉然后我会设置20个jQuery，我认为这是多余的..

我的想法是传递输入的ID但是如何做到这一点..

任何想法..

请帮帮我谢谢。

Answer 1

如果所有下拉/输入配对都包含在单个父包装中，则整个问题相当容易。给输入提供一个共同的类。然后从下拉列表中，它是对主父的简单遍历，并按类

查找内部输入

<div class="module_wrap">
    <input class="menu-input" type="text" class="form-control" id="txtCopyright" placeholder="IN" />
    <div class="input-group-btn nopadding">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border-radius:0"><span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" id="myDropdown" role="menu">
            <li><a>IN</a>
            </li>
            <li><a>BEFORE</a>
            </li>
            <li><a>AFTER</a>
            </li>
        </ul>
    </div>
</div>

JS

$('.dropdown-menu li').click(function () {
    $(this).closest('.module_wrap').find('.menu-input').val($(this).text());

});

Answer 2

应用类选择器并使用data- attribute：

<ul class="dropdown-menu dropdown-menu-right" id="myDropdown" data-control-id="txtCopyright" role="menu">
    <li><a>IN</a>
    </li>
    <li><a>BEFORE</a>
    </li>
    <li><a>AFTER</a>
    </li>
</ul>

点击 li ，使用closest()或parent()获取父 ul ，然后获取其data-control-id属性值，然后这样做：

$('.dropdown-menu li').click(function () {
    $('#'+$(this).closest(".dropdown-menu").data("control-id")).val($(this).text());
});

或：

$('.dropdown-menu li').click(function () {
        $('#'+$(this).parent(".dropdown-menu").data("control-id")).val($(this).text());
    });

样本：

FIDDLE EXAMPLE

当单击另一个对象时，如何在jQuery中传递对象？

2 个答案:

样本：