Discussion :

[mahdiweb]

J'essaie de sélectionner une option dans une liste déroulante via une extension chrome avec javascript. mais Lorsque je sélectionne normalement une option dans la première liste déroulante la deuxième liste reste grisée sans aucun changement malgré les nombreuses méthodes utilisées , en voici les exemples :

en jquery

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$("#categorisation_1").val($("#categorisation_1 option").eq(1).val());
$('#categorisation_1').val('1: Object').change();
$('#categorisation_1').val('1: Object').dblclick();
$('#categorisation_1>option:eq(1)').prop('selected', true);
$("#categorisation_1").val('1: Object').trigger('change');
$('#categorisation_1').val('1: Object');
$('#categorisation_1>option:eq(1)').attr('selected', 'selected').trigger('change');
$('#categorisation_1').find('option:eq(1)').attr('selected', true);

en javascript

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.getElementById('categorisation_1').options[1].selected=true;
document.getElementById('categorisation_1').value = '1: Object';
document.getElementById("categorisation_1").selectedIndex = 1;
document.getElementById('categorisation_1').getElementsByTagName('option')[1].selected = 'selected';
document.getElementById('categorisation_1').value = '1: Object';
document.getElementById('categorisation_1').focus();
document.getElementById('categorisation_1').value = '1: Object';
document.getElementById("categorisation_1").options[1].selected = "selected";
document.getElementById('categorisation_1').getElementsByTagName('option')[1].selected = 'selected'
*******************
var select = document.getElementById("categorisation_1");
select.size = select.options.length;
******
document.getElementById('categorisation_1').setAttribute('size', 1);
********************
Array.from(document.getElementById('categorisation_1').options)
    .filter(x => x.value === "1: Object")[0]
      .setAttribute('selected', true);

Rien n'a fonctionné, Ils modifient la valeur dans la première liste déroulante mais la deuxième liste déroulante reste grisé, Existe-t-il un moyen pour simuler un clic humain via javascript sur un bouton du clavier ou toute autre méthode ?

pour plus de détail voici Pièce jointe 625448 de quoi je parle ils sont 4 listes liées et grisées il faut obligatoirement que je rempli la première manuellement pour avoir l'accès aux autres

les codes sources de la première (categorisation_1) et deuxième liste (categorisation_2) sont : Pièce jointe 625448Pièce jointe 625451

[mathieu]

essayez avec premiere_liste.dispatchEvent(new Event("change"));. je ne sais pas si c'est exactement la même chose que "trigger change" en jquery.
et si l'évènement "change" ne fait rien, vous devrez étudier le code de la page pour chercher si la modification est gérée par un autre évènement.

[Doksuri]

tu n'a pas besoin de simuler un clique.. il suffit de changer la value

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<select id="test">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
const select = document.getElementById('test');
setTimeout(() => { select.value = 3; }, 1E3);
setTimeout(() => { select.value = 2; }, 2E3);

=> ceci changera la valeure du select [selectionne]. si la 2eme liste ecoute le change de la 1ere, cela devrai resoudre ton probleme

[mahdiweb]

j'arrive à sélectionner une valeur sur la première liste mais la deuxième liste reste toujours grisée, lorsque je fais le choix manuellement avec la souris le champ de la deuxième liste s'active et me donne la main pour faire le choix. et même avec une extension imacros ça marche avec le code suivant

TAG POS=1 TYPE=SELECT ATTR=ID:categorisation_1 CONTENT=%1:<SP>Object

est ce que vous avez des propositions avec javascript ou jquery ?

[NoSmoking]

Bonjour,

=> ceci changera la valeure du select [selectionne]. si la 2eme liste ecoute le change de la 1ere, cela devrai resoudre ton probleme

Le changement par script de la value d'un <select> ne déclenche pas l'événement change, il faut donc effectivement passer par la création d'un événement.

est ce que vous avez des propositions avec javascript ou jquery ?

jQuery c'est du JavaScript !

[Doksuri]

Le changement par script de la value d'un <select> ne déclenche pas l'événement change, il faut donc effectivement passer par la création d'un événement.

autant pour moi ... merci pour l'info

du coup, un mix du dispatch de mathieu et mon script :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<select id="select1">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select> - 
<select id="select2" disabled="disabled">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
const select1 = document.getElementById('select1');
const select2 = document.getElementById('select2');
 
select1.addEventListener('change', () => {
select2.removeAttribute('disabled');
});
 
setTimeout(() => {
select1.value = 2;
select1.dispatchEvent(new Event("change"));
}, 1E3);

[mahdiweb]

Merci infiniment c'est parfait, que Dieu vous bénisse