5546 sujets

Sémantique web et HTML

[Résolu] Trouver le selectedindex d'un select dans un datalist

Bonjour
J'ai trouvé dans l'article https://www.alsacreations.com/article/lire/1334-html5-element-datalist.html un grand intérêt.
mon but est de trouver dans la balise datalist l'index de la ligne sélectionnée dans la balise select.
on peut récupérer le selctedIndex quand le select n'est pas dans une datalist
Voici un code simplifié pour exemple

<script>
function change_nom_adherent()
{
var txt = document.getElementById("coor_adherent").value;
var num= txt.indexOf(" ");
document.getElementById("id_adherent").value = txt.slice(0,num);

var ind=document.getElementById("select_adherent").selectedIndex ;
console.log("select_adherent "+ind); /* retour =  select_adherent 0 */
var ind=document.getElementById("coor_adherent").selectedIndex ;
console.log("coor_adherent "+ind);  /* retour =  coor_adherent indefined 0 */
var ind=document.getElementById("liste_adherent").selectedIndex ;
console.log("liste_adherent "+ind);/* retour =  liste_adherent indefined 0 */
}

function erase_nom_adherent()
{
document.getElementById("coor_adherent").value="";
document.getElementById("id_adherent").value="" ;
}
</script>


<form id="selection_adherent" name="selection_adherent" method="" action="">

	<input name="id_adherent" id="id_adherent" type="TEXT" value="" style="width:40px" disabled > 

	<input name="coor_adherent" id="coor_adherent" type="TEXT"  list="liste_adherent" style="width:300px"  onchange="change_nom_adherent()" onclick="erase_nom_adherent()"> 
	<datalist id="liste_adherent" >
		<select  name="select_adherent" id="select_adherent" style="left:20px" onchange="select_nom_adherent()" >
			<option value="" selected></option>
	
			<option value="154 - ALAIN" > </option>
			<option value="14 - BERNARD" > </option>
			<option value="32 - DUFRESNE" > </option>
			<option value="15 - DURAND" > </option>
		</select>
	</datalist>	
</form>
Modérateur
Bonjour,

Il me semble que c'est soit <datalist> (référencé par l'attribut "list" d'un <input>), soit <select> sans <input>, mais pas les deux à la fois, non ?

Ou alors y a un truc qui m'échappe.

Amicalement,
Modifié par parsimonhi (30 Nov 2020 - 14:46)
Bonjour merci d'avoir répondu.

Le code ci-dessus fonctionne bien.
sauf que la liste qui se trouve dans le "select" toutes les "options" est créée à partir d'une requête sur une base de donnée. Lorsque j'ai sélectionné un nom je veux retrouver dans le tableaux de retour de la requête avec son indice la ligne complète sans relancer la requête.
Modérateur
Bonjour,

1) Au risque de me répéter, la balise <select> ne sert à rien ici selon moi, voire est une erreur. Si les navigateurs s'en sortent, c'est parce qu'ils sont sympas.

Il faut la supprimer.

2) Je ne suis pas sûr d'avoir vraiment compris ce que tu veux, mais la fonction ci-dessous affiche l'indice de l'option sélectionnée dans la console :
function change_nom_adherent()
{
	var txt = document.getElementById("coor_adherent").value;
	var list=document.querySelectorAll("#liste_adherent option");
	for(var k=0;k<list.length;k++)
	{
		if(list[k].value==txt)
		{
			console.log(k);
			break;
		}
	}
}

Amicalement,
Meilleure solution
Heureusement que tu te répètes, car bien sûr tu as raison le select ne sert à rien!
(j'ai trouvé ce code sur ce site voir la référence en début) pas grave Smiley biggrin

et la fonction donne exactement ce que je voulais. Smiley clapclap

mais je pense que c'est inutile car il me suffit de faire une requête avec l'ID pour avoir toutes les coordonnées de l'adhérent sélectionné.
car si je ne me trompe pas le tableau de retour d'une requête, 
$retours = mysqli_query($liaison,$requete);
est au niveau du serveur, donc chercher dans ce tableau la ligne 
 mysqli_data_seek($retours, $ind);
$donnees = mysqli_fetch_array($retours);

$ind correspondant à mon adhérent se fait toujours sur le serveur.
Je crois que je suis de moins en moins clair pour des pros Smiley confus

je marque comme résolu mais tu peux me dire si j'ai dit une ânerie Smiley cligne
Mille Merci
Modérateur
Bonjour,

Le php ne s'exécute que sur le serveur en effet. Et aussi tes explications sont en effet peu claires mais ce n'est pas grave Smiley cligne : l'essentiel est que tu arrives toi à comprendre ce que tu fais Smiley smile

La balise <select> est dans le code des exemples de la page https://www.alsacreations.com/article/lire/1334-html5-element-datalist.html essentiellement pour des raisons de compatibilité avec de vieux navigateurs qui ne connaissaient pas du tout la balise <datalist>. Mais l'article date de 2012. En 2020, (presque plus?) personne n'utilise ces vieux navigateurs. Il reste quelques bugs relatifs à la balise <datalist>. Mais ajouter une balise <select> ne les réglera pas de toute façon.

Voir https://caniuse.com/datalist

Amicalement,
le problème pour des amateurs comme moi c'est qu'on utilise pas les bons termes et qu'on a tendance à tout mélanger.

encore Merci.
Sujet clos
Aller à