J'utilise Bootstrap-select - Silvio Moreto et j'ai deux options déroulantes.

<strong>Option 1</strong>
<select class="selectpicker" name="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<br />

<strong>Option 2</strong>
<select class="selectpicker" name="abc">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
</select>

Et le code jQuery est:

$('.selectpicker').selectpicker({
     style: 'btn-info',
     size: 4
});

Maintenant, ce que j'essaye, c'est:

  • Si l'utilisateur sélectionne 3 dans la première option, je souhaite définir la valeur C sélectionnée dans la deuxième option et la même méthode inverse avec la deuxième option est utilisée.
  • Si l'utilisateur sélectionne C dans la deuxième option, je souhaite définir la valeur 3 sélectionnée dans la première option.

J'ai écrit le code jQuery ci-dessous et il ne fonctionne qu'avec la première option mais pas avec la deuxième option.

$('.selectpicker').on('change', function () {
    var opValue = $('.selectpicker').val();
    $('.selectpicker').val(opValue);
    $('.selectpicker').selectpicker('refresh');
});

REMARQUE: dans mon exemple, la valeur sera la même et ne changera pas.

Voici un exemple de code JSFiddle: http://jsfiddle.net/user/mananpatel/

Une idée comment faire?

Merci.

0
Mr.Happy 17 juil. 2015 à 15:04

2 réponses

Meilleure réponse

Voici:

 $('.selectpicker').selectpicker({
     style: 'btn-info',
     size: 4
 });

 $('.selectpicker').on('change', function () {
     var opValue = $(this).val();
     console.log(opValue);
     $('.selectpicker').val(opValue);
     $('.selectpicker').selectpicker('refresh');
 });

Utilisez $(this) pour obtenir la valeur du combo sélectionné. Dans votre code, vous utilisez toujours la valeur du premier combo.

Fiddle: http://jsfiddle.net/RUAS4/126/

3
Juan Marcos Armella 17 juil. 2015 à 12:18

Voici comment je l'ai fait:

$("select").change(function(){
    $("select").val($(this).val());
    $('.selectpicker').selectpicker('refresh');
});

JSFiddle

2
Ahs N 17 juil. 2015 à 12:20