J'essaie de détecter le changement de liste de sélection si la liste de sélection est masquée et réglée par js.

Mon code est ici: JsFiddle

<select onchange="myfunction()" style="display:none">
  <option value="0">zero</option>
  <option value="1">one</option>
  <option value="2">two</option>
</select>
<button class=z>zero</button>
<button class=o>one</button>
<button class=t>two</button>
$('select').change(function() {
  alert("ok");
});
$('.z').click(function() {
  $("select").val('0');
});
$('.o').click(function() {
  $("select").val('1');
});
$('.t').click(function() {
  $("select").val('2');
});

J'ai besoin d'une solution pour appeler la fonction de changement en cliquant sur le bouton.

1
Hacskó Ádám 24 janv. 2017 à 15:30

4 réponses

Meilleure réponse

Il n'y a pas d'événement change déclenché lorsque vous définissez la valeur d'un élément select par programmation. Pour contourner ce problème, vous pouvez trigger() un manuellement:

$('select').change(function() {
  console.log('changed', this.value)
});
$('.z').click(function() {
  $("select").val('0').trigger('change');
});
$('.o').click(function() {
  $("select").val('1').trigger('change');
});
$('.t').click(function() {
  $("select").val('2').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select style="display: none">
  <option value="0">zero</option>
  <option value="1">one</option>
  <option value="2">two</option>
</select>
<button class="z">zero</button>
<button class="o">one</button>
<button class="t">two</button>
1
Rory McCrossan 24 janv. 2017 à 12:34
<select style="display:none">
  <option value="0">zero</option>
  <option value="1">one</option>
  <option value="2">two</option>
</select>
<button class=btn data-select-val="0">zero</button>
<button class=btn data-select-val="1">one</button>
<button class=btn data-select-val="2">two</button>

$('select').change(function() {  
   alert($(this).val());
});
$('.btn').click(function(){
    $("select").val($(this).data("select-val")).change();
});
1
Monzurul Haque Shimul 24 janv. 2017 à 12:45

Changez votre code en ceci:

$('select').change(function(){
    alert("ok");
});

$('.z').click(function(){
    $("select").val('0').change();
});
$('.o').click(function(){
    $("select").val('1').change();;
});
$('.t').click(function(){
    $("select").val('2').change();;
});
0
halfer 26 févr. 2017 à 15:00

Utilisez la fonction .trigger pour déclencher l'événement change.

0
Sunil 24 janv. 2017 à 12:39