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

Question

i have a html code like this:

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

Other input-group

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

and i have a jQuery like this..

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

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

It actually work in me.. but the problem is that i want to use only one jQuery in all my dropdown.. it is easy to use for now because i have only 2 dropdown what if i have 20 dropdown then i will set 20 jQuery's and I think it is redundant..

My idea is to pass the id of inputs but how to do that..

Any idea..

Please help me Thank you.

Answer 1

If all dropdown/ input pairings each are contained in a single parent wrapper the whole issue is fairly easy. Give the input's a common class. Then from the dropdown it is a simple traverse to main parent and look for input inside by class

<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

Apply class selector and use 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>

and on click of li use closest() or parent() to get parent ul and then fetch its data-control-id attribute value and then do like this:

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

or:

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

DEMO:

FIDDLE EXAMPLE