web-dev-qa-db-fra.com

Bootstrap 3 sélectionnez le formulaire de saisie en ligne

J'essaie d'obtenir une entrée et de sélectionner l'option inline attachée les unes aux autres, par exemple cette démo utilisant Bootstrap 2 .

En suivant les instructions de Bootstrap 3, je parviens à le faire:

<div class="container">
    <div class="col-sm-7 pull-right well">
      <form class="form-inline" action="#" method="get">
        <div class="form-group col-sm-5">
          <input class="form-control" type="text" value="" placeholder="Search" name="q">
        </div>
        <div class="form-group col-sm-3">
          <select class="form-control" name="category">
              <option>select</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
          </select>
        </div>
        <button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
      </form>
    </div>
</div>

C’est réactif, mais l’entrée et la sélection ne peuvent pas être attachées sans quelques méchants piratages CSS. J'ai trouvé beaucoup d'exemples avec des boutons attachés, mais cela ne fonctionne pas avec l'élément select.

twitter-bootstraptwitter-bootstrap-3html-select
28
Collector

Je pense avoir accidentellement trouvé une solution. La seule chose à faire est d'insérer un <span class="input-group-addon"></span> vide entre le <input> et le <select>.

De plus, vous pouvez le rendre "invisible" en réduisant sa largeur, son remplissage horizontal et ses bordures:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
    <span class="input-group-addon" title="* Price" id="priceLabel">Price</span>
    <input type="number" id="searchbygenerals_priceFrom" name="searchbygenerals[priceFrom]" required="required" class="form-control" value="0">
    <span class="input-group-addon">-</span>
    <input type="number" id="searchbygenerals_priceTo" name="searchbygenerals[priceTo]" required="required" class="form-control" value="0">
  
    <!-- insert this line -->
    <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
  
    <select id="searchbygenerals_currency" name="searchbygenerals[currency]" class="form-control">
        <option value="1">HUF</option>
        <option value="2">EUR</option>
    </select>
</div>

Testé sur Chrome et FireFox.

29
cinemazealot

Peut être fait avec du code Bootstrap pur.

<link href="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="form-group">
  <label for="id" class="col-md-2 control-label">ID</label>
  <div class="input-group">
    <span class="input-group-btn">
      <select class="form-control" name="id" id="id">
        <option value="">
      </select>
    </span>
    <span class="input-group-btn">
      <select class="form-control" name="nr" id="nr">
        <option value="">
      </select>
    </span>
  </div>	
</div>

16
Daniel Bjørnådal

Merci à G_money et à d’autres suggestions pour cette excellente solution de saisie de texte avec liste déroulante en ligne ... voici une autre excellente solution.

<form class="form-inline" role="form" id="yourformID-form" action="" method="post">
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-male"></i></span>

        <div class="form-group">
            <input size="50" maxlength="50" class="form-control" name="q" type="text">          
        </div>

        <div class="form-group">
            <select class="form-control" name="category">
                <option value=""></option>
                <option value="0">select1</option>
                <option value="1">select2</option>
                <option value="2">select3</option>
            </select>           
        </div>
    </div>
</form>

Cela fonctionne avec Bootstrap 3: permettre l’entrée de texte en ligne avec un menu déroulant de sélection. Voici à quoi ça ressemble ci-dessous ...

enter image description here

10
Jesse C

Cela nécessite un ajout mineur de CSS pour que cela fonctionne avec Bootstrap 3:

.input-group-btn:last-child > .form-control {
  margin-left: -1px;
  width: auto;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="form-group">
  <div class="input-group">
    <input class="form-control" name="q" type="text" placeholder="Search">
    
    <div class="input-group-btn">
      <select class="form-control" name="category">
        <option>select</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
    
  </div>
</div>

9
jwolinsky

Je n'arrive pas non plus à faire en sorte que cela fonctionne sans piratage. Je me suis donc contenté d'utiliser le menu déroulant à la place d'une zone de sélection et d'envoyer les informations par le biais d'un champ masqué, comme ceci (avec votre code):

http://bootply.com/93417

Jquery:

$('.dropdown-menu li').click(function(e){
e.preventDefault();
  var selected = $(this).text();
  $('.category').val(selected);  
});

HTML:

<div class="container">
    <div class="col-sm-7 pull-right well">
      <form class="form-inline" action="#" method="get">
        <div class="input-group col-sm-8">
          <input class="form-control" type="text" value="" placeholder="Search" name="q">
       <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
         <input type="hidden" name="category" class="category">
      </div><!-- /btn-group -->
        </div>
        <button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
      </form>
    </div>
</div>

Vous ne savez pas si cela fonctionnera pour ce que vous voulez, mais c'est une option pour vous.

8
spacebean

Une autre réponse différente à une vieille question. Cependant, j'ai trouvé une implémentation faite spécialement pour bootstrap qui pourrait s'avérer utile ici J'espère que cela aide tous ceux qui cherchent ...

Bootstrap-select

3
Aviral

En fonction de la réponse de spacebean, cette modification modifie également le texte affiché lorsque l'utilisateur sélectionne un élément différent (comme le ferait un <select>):

http://www.bootply.com/VxVlaebtnL

HTML:

<div class="container">
  <div class="col-sm-7 pull-right well">
    <form class="form-inline" action="#" method="get">
      <div class="input-group col-sm-8">
        <input class="form-control" type="text" value="" placeholder="Search" name="q">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="mydropdowndisplay">Choice 1</span> <span class="caret"></span></button>
          <ul class="dropdown-menu" id="mydropdownmenu">
            <li><a href="#">Choice 1</a></li>
            <li><a href="#">Choice 2</a></li>
            <li><a href="#">Choice 3</a></li>
          </ul>
          <input type="hidden" id="mydropwodninput" name="category">
        </div><!-- /btn-group -->
      </div>
    <button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
    </form>
  </div>
</div>

Jquery:

$('#mydropdownmenu > li').click(function(e){
  e.preventDefault();
  var selected = $(this).text();
  $('#mydropwodninput').val(selected);
  $('#mydropdowndisplay').text(selected);
});
0
robamler

Voici comment je l'ai fait sans extra css ni jquery:

<div class="form-group">
    <div class="input-group">
        <label class="sr-only" for="extra3">Extra name 3</label>
        <input type="text" id="extra3" class="form-control" placeholder="Extra name">
        <span class="input-group-addon">
            <label class="checkbox-inline">
               Mandatory? <input type="checkbox" id="inlineCheckbox5" value="option1">
            </label>
        </span>
        <span class="input-group-addon">
             <label class="checkbox-inline">
               Per person? <input type="checkbox" id="inlineCheckbox6" value="option2">
             </label>
        </span>
        <span class="input-group-addon">
            To be paid? 
            <select>
                <option value="online">Online</option>
                <option value="on spot">On Spot</option>
            </select>
        </span>
    </div>
</div>
0
rob.m