Menu déroulant déclencher par un bouton [Résolu]

Signaler
Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016
-
Messages postés
32974
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 juin 2021
-
Bonjour tout le monde,

J'ai un <button> contenu dans un <div>.Le <button> est positionné à l'extrême droite. Ce essai en vain c'est de rendre le bouton <button> cliquable afin d'afficher un menu déroulant dans la partie neutre à gauche du <button>.je veux que Le menu déroulant se déclenche uniquement par ce bouton la.voici mon code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="JavaScript" type="text/JavaScript">
function show_table(){

document.getElementById('category').style.display="inline";

}
</script>

<body>
<div style="width: 750px;border:1px solid;margin: 5px;padding: 3px;height: 25px;">
<div id="category" style="display:none;">
<select style="width:85%; height:25px; float:left;font-size: 11px;">
<option>test</option>
<option>essai</option>
<option> bonjour</option>
</select>
</div>
<div style="width: 15%; height: 25px; float: right; right:30px;font-size: 11px;color: #551679;">
<button onclick="javascript:show_table();" >changer</button>
</div>
</div>
</body>
</html>
Quelqu'un peut t'-il venir à mon aide?

8 réponses

Messages postés
32974
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 juin 2021
351
Bonjour,

Un "button" c'est en général :
<input type="button" onclick="show_table();" value="changer">
et pas
 <button ...  

Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016

merci pour la remarque mais ça ne donne pas ce que je veux.Je veux que le <select> </select> fonctionne uniquement grâce au clic du <button>...</button>
Messages postés
32974
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 juin 2021
351
Bonjour,

Qu'entends tu par
e veux que le <select> </select> fonctionne uniquement grâce au clic du <button>

A l'heure actuelle ton script Affiche le div contenant ton Select... mais si c'est rendre ton select "actif" uniquement après lr click sur le bouton tu peux toujours tester ceci :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body>
<div style="width: 750px;border:1px solid;margin: 5px;padding: 3px;height: 25px;">
<div id="category" style=";">
<select id='monselect' style="width:85%; height:25px; float:left;font-size: 11px;">
<option  disabled="disabled" >test</option>
<option  disabled="disabled" >essai</option>
<option  disabled="disabled" > bonjour</option>
</select>
</div>
<div style="width: 15%; height: 25px; float: right; right:30px;font-size: 11px;color: #551679;">
<button onclick="Enable_select();" >changer</button>
</div>
</div>

<script type="text/JavaScript">
function Enable_select(){
var elem = document.getElementById('monselect');
var opt = elem.options;

for(i=0;i<opt.length;i++){
 opt[i].disabled="";
}
}
</script>


</body>
</html> 



Sinon essaie de reformuler ta question.
Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016

d'accord merci mais ça ne m'arrange pas.Tu voir les flèches d'affichage du menu déroulant avec <select> </select> je ne les veux pas car je veux les remplacer par un <button> </button> qui fait le même boulo que les flèches.tu me comprend mieux?
Messages postés
32974
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 juin 2021
351
Bonjour,
Il faut que tu apprennes à reformuler... par ce que là... j'ai vraiment du mal à comprendre ce que tu souhaites...

les flèches d'affichage du menu déroulant
Tu veux parler des flèches de la scrollbar du SELECT ?

EDIT :
Si c'est la scrollbar que tu veux masquer :
.monselect::-webkit-scrollbar {display:none;}
.monselect::-moz-scrollbar {display:none;}
.monselect::-o-scrollbar {display:none;}
.monselect::-google-ms-scrollbar {display:none;}
.monselect::-khtml-scrollbar {display:none;}


Si c'est l'Affichage de la liste ( LA flèche qui se trouve au bout du select et qui déclenche l'affichage de la liste) je regarde ce que je peux trouver.

Sinon... essaie encore d'expliquer exactement ce que tu souhaites.
*




Avant de poser une question, merci de lire la charte du site.
Cordialement, Jordane
Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016

effectivement je ne veux pas avoir la flèche qui se trouve au bout du select et qui déclenche l'affichage de la liste.je veux que <button> le remplace.Ainsi ce serait <btton> qui déclenchera l'affichage de la liste.
Messages postés
32974
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 juin 2021
351
Suppression de la flèche se trouvant à droite du select ( la "dropDown arrow")
+ Affichage de la liste par clic sur un bouton.


<style type="text/css">

#select1{
   -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    text-indent: 1px;
    text-overflow: '';
}

</style>
<script type="text/javascript">
function expandSelect(id, size)
{
var select = document.getElementById(id);
if(select.size == select.options.length){
	select.size = 1;
}else{
	select.size = select.options.length;
}
}
</script>


<select size="1" id="select1" onclick="this.size=1">
<option value="">hello
<option value="">abc
<option value="">234
</select>


<button onclick="expandSelect('select1')"> Test </button>

Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016

merci grandement c'est bien ce que je cherchais.
Messages postés
32974
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 juin 2021
351
Dans ce cas, merci de cliquer sur le tag : Marquer comme résolu en haut de cette discussion.