Change Bootstrap dropdown selection using jquery

Question

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>

'dnsType' is the value for attribute aria-labelledby, not a classname — DinoMyte
– DinoMyte, Commented Nov 22, 2016 at 23:52
Bootstrap doesn't have a toggle function. Jquery has a toggle function but it hides and shows an element. So I don't think it does what you want it to do. — Cave Johnson
– Cave Johnson, Commented Nov 23, 2016 at 0:02

Cave Johnson · Accepted Answer · 2016-11-23 00:13:04Z

2

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"

answered Nov 23, 2016 at 0:13

Cave Johnson

6,8905 gold badges44 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TechnoCorner Over a year ago

Thank you so much!

Collectives™ on Stack Overflow

Change Bootstrap dropdown selection using jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related