Home > DeveloperSection > Forums > All bootstrap dropdown show the same item
Pravesh Singh
Pravesh Singh

Total Post:101

Points:709
Posted on    October-04-2014 1:56 AM

 JQuery Bootstrap  JavaScript  JQuery 
Ratings:


 2 Reply(s)
 921  View(s)
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




Kamlakar Singh
Kamlakar Singh

Total Post:194

Points:1396
Posted on    October-04-2014 1:57 AM

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>


Kamlakar Singh
Kamlakar Singh

Total Post:28

Points:196
Posted on    October-06-2014 2:51 AM


Don't want to miss updates? Please click the below button!

Follow MindStick