ALL BOOTSTRAP DROPDOWN SHOW THE SAME ITEM

Pravesh Singh

Total Post:101

Points:709
Posted by  Pravesh Singh
 1273  View(s)
Ratings:
Rate this:
i'm using bootstrap dropdown and some jquery code
my problem is when i'm change the value of one dropdown then all dropdown change value automatick

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

here is javascript code:

<script>

    $(function () {

        $(".dropdown-menu li a").click(function () {

            $(".btn:first-child").text($(this).text());

            $(".btn:first-child").val($(this).text());

        });

    });

</script>

here is bootstrap dropdown code:

<div class="row">

        <div class="col-md-6">

            <div class="dropdown">

                <button class="btn btn-default dropdown-toggle" type="button" id="ddlForwardTo" data-toggle="dropdown">

                    Select a Forward To

                    <span class="caret"></span>

                </button>

              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>

                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>

                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

              </ul>

            </div>

        </div>

        <div class="col-md-6">

            <div class="dropdown">

                <button class="btn btn-default dropdown-toggle" type="button" id="ddlManufacturing" data-toggle="dropdown">

                    Select a Manufacturing contact

                    <span class="caret"></span>

                </button>

              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>

                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>

                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

              </ul>

            </div>

        </div>

    </div>

i'm want to not change value of all dropdown onchnage one dropdown value


  1. Kamlakar Singh

    Post:194

    Points:1396
    Re: All bootstrap dropdown show the same item

    try this code:

    <script>

        $(function () {

            $(".dropdown-menu li a").click(function () {

                $(this).parents('.dropdown').children('.btn').text($(this).text());

                $(this).parents('.dropdown').children('.btn').val($(this).text());

            });

        });

    </script>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!