CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
Matt
Matt

Reputation: 1257

Bootstrap dropdown option not showing after selected

I have the following form, that when the dropdown is clicked and an option selected, the option doesn't appear at the top: 

<div class="input-group">
<div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">+1 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" id="1">US: +1</a>
        </li>
        <li><a href="#" id="44">UK: +44</a>
        </li>
    </ul>
</div>
<input type="text" class="form-control" aria-label="..." placeholder="Your   
   phone number"> <span class="input-group-btn">
<button class="btn btn-default" type="button">SUBMIT</button>
</span>
</div>
</div>

jquery

   // Load dialog on page load
   $('#basic-modal-content').modal();

   // Load dialog on click
   $('#basic-modal .basic').click(function (e) {
   $('#basic-modal-content').modal();
   return false;
   });

jsfiddle

Upvotes: 1

Views: 2385

Answers (1)

Tim Lewis
Tim Lewis

Reputation: 29316

Here's a Bootply that changes the button html attribute when you choose a new one.

Bootply

And the code:

HTML:

<div class="input-group">
  <div class="input-group-btn">
    <button id="label" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">+1 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#" id="1">US: +1</a>
      </li>
      <li><a href="#" id="44">UK: +44</a>
      </li>
    </ul>
  </div>
  <input class="form-control" aria-label="..." placeholder="Your   
phone number" type="text"> <span class="input-group-btn">
  <button class="btn btn-default" type="button">SUBMIT</button>
  </span>
</div>

Javascript:

$("#1, #44").click(function(e){
  $("#label").html("+" + $(this).attr("id") + " <span class='caret'></span>");
});

As per the comments, I really don't know what the second part of your question's code is all about, but changing the value of a button based on something you click is pretty simple. Note, I added an id="label" to the button to make accessing and changing it easier.

Hope that helps!

Upvotes: 1

Related Questions