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

Messages postés
36
Date d'inscription
lundi 17 février 2014
Dernière intervention
2 septembre 2016
-
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?
Afficher la suite 

Votre réponse

8 réponses

Messages postés
23592
Date d'inscription
mercredi 22 octobre 2003
Statut
Contributeur
Dernière intervention
12 décembre 2018
0
Merci
Bonjour,

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

Commenter la réponse de jordane45
Messages postés
36
Date d'inscription
lundi 17 février 2014
Dernière intervention
2 septembre 2016
0
Merci
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>
Commenter la réponse de ksomda
Messages postés
23592
Date d'inscription
mercredi 22 octobre 2003
Statut
Contributeur
Dernière intervention
12 décembre 2018
0
Merci
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.
Commenter la réponse de jordane45
Messages postés
36
Date d'inscription
lundi 17 février 2014
Dernière intervention
2 septembre 2016
0
Merci
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?
Commenter la réponse de ksomda
Messages postés
23592
Date d'inscription
mercredi 22 octobre 2003
Statut
Contributeur
Dernière intervention
12 décembre 2018
0
Merci
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
Commenter la réponse de jordane45
Messages postés
36
Date d'inscription
lundi 17 février 2014
Dernière intervention
2 septembre 2016
0
Merci
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.
Commenter la réponse de ksomda
Messages postés
23592
Date d'inscription
mercredi 22 octobre 2003
Statut
Contributeur
Dernière intervention
12 décembre 2018
0
Merci
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>

Commenter la réponse de jordane45
Messages postés
36
Date d'inscription
lundi 17 février 2014
Dernière intervention
2 septembre 2016
0
Merci
merci grandement c'est bien ce que je cherchais.
jordane45
Messages postés
23592
Date d'inscription
mercredi 22 octobre 2003
Statut
Contributeur
Dernière intervention
12 décembre 2018
-
Dans ce cas, merci de cliquer sur le tag : Marquer comme résolu en haut de cette discussion.
Commenter la réponse de ksomda

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.