CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
TechnoCorner
TechnoCorner

Reputation: 5175

Change Bootstrap dropdown selection using jquery

I have a bootstrap select dropdown.

I want to change the selection when I load the page. How can I write jquery for the same?

I've tried using $('.dnsType').toggle('Hostname') but that didnt work :(

This is my code:

<div class="row form-group">
    <div class="btn-group dnsType <%= getColumnSize(editMode) %>">
        <button class="btn btn-xs white dropdown-toggle" id="dnsType" type="button" data-toggle="dropdown" aria-expanded="true">
            <span data-value="IP Address">IP Address</span><b class="caret"></b>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dnsType">
            <li><a value="IP Address">IP Address</a></li>
            <li><a value="Hostname">Hostname</a></li>
        </ul>
    </div>
    <div class="<%= getColumnSize(editMode) %>">
        <div class="form-horizontal">
            <input type="text" name="ipAddress" class="ipAddress" data-name="IP Address" class="form-control" value="<%= controller.ipAddress %>">
            <span class="validationErrorMessage"></span>
        </div>
    </div>
</div>

Upvotes: 2

Views: 2053

Answers (1)

Cave Johnson
Cave Johnson

Reputation: 6788

Bootstrap dropdowns are not like <select> elements. They don't have "selections". It is just a dropdown that shows a list of links when you click the button. I'm guessing that you just want to change the text for that button when the page loads. Here is how you can do that:

$("#dnsType span").text("Hostname").attr('data-value','Hostname');

This sets the text to "Hostname" and changes the data-value attribute to "Hostname"

Upvotes: 2

Related Questions