web-dev-qa-db-fra.com

bootstrap-select ajouter un élément et le sélectionner

J'utilise Bootstrap Select de Silvio Moreto.

Sur ma page, j'ai un bouton qui ouvre un modal avec une zone de saisie qui vous permet d'ajouter un élément au sélecteur. J'aimerais alors que cet élément soit automatiquement sélectionné, mais je n'arrive pas à le faire fonctionner.

Le code que j'ai est:

$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');
$('#myselect').val(newitemnum);
$('#myselect').selectpicker('refresh');

Mais cela ne fonctionne tout simplement pas. L'élément n'est pas sélectionné.

J'ai essayé de remplacer la ligne de sélection par:

$('#myselect').selectpicker('val',newitemnum);

mais ça ne marche pas non plus

Toutes les idées très appréciées (bien que l'article soit ajouté au sélecteur).

javascriptjquerytwitter-bootstrapbootstrap-select
14
Chris Jones

Vous avez une faute de frappe. Au lieu de:

$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');

Vous avez besoin:

$('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');

Voici une démo JSFiddle: http://jsfiddle.net/xbr5agqt/

Le bouton "Ajouter et sélectionner l'option" Sauce soja "" effectue les opérations suivantes:

$("#myselect").append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
$("#myselect").val(4);
$("#myselect").selectpicker("refresh");

Une approche légèrement plus rapide (utilisée par le bouton "Ajouter et sélectionner l'option" Relish ") consiste à ajouter le nouvel élément <option> avec l'attribut selected déjà appliqué:

$("#myselect").append('<option value="'+newitemnum+'" selected="">'+newitemdesc+'</option>');
$("#myselect").selectpicker("refresh");
40
Daniel Trebbien

Pour ajouter options dynamiquement dans bootstrap-selectpicker, append le option au select et refresh le selectpicker

$(document).on('click','#addOptions',function(){
  var newitemnum = Math.floor(Math.random() * 100) + 1;
  var newitemdesc = "Item "+ newitemnum;
  
  // Append the option to select
  $('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
  
  // Set the select value with new option
  $("#myselect").val(newitemnum);
  
  // Refresh the selectpicker
  $("#myselect").selectpicker("refresh");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

<select name="myselect[]" class="selectpicker" id="myselect">
  <option value="A1">Anatomy</option>
  <option value="A2">Anesthesia</option>
  <option value="A3">Biochemistry</option>
  <option value="A4">Community Medicine</option>
  <option value="A5">Dermatology</option>
  <option value="A6">ENT</option>
</select>

<button id="addOptions" class="btn btn-success">Add</button>

Pour mieux, ajoutez l'attribut selected dans l'option append

// Append the option to select
$('#myselect').append('<option value="'+newitemnum+'" selected>'+newitemdesc+'</option>');
0
Nishal K.R