ALL BOOTSTRAP DROPDOWN SHOW THE SAME ITEM

Pravesh Singh

Total Post:101

Points:709
Posted by  Pravesh Singh
 1531  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>

      Modified On Apr-05-2018 06:43:56 AM

Answer

NEWSLETTER

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