Menu déroulant déclencher par un bouton

Résolu
ksomda
Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016
- Modifié par kazma le 17/02/2014 à 21:33
jordane45
Messages postés
35773
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 juillet 2022
- 19 févr. 2014 à 13:07
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?
A voir également:

8 réponses

jordane45
Messages postés
35773
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 juillet 2022
358
17 févr. 2014 à 19:52
Bonjour,

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

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

17 févr. 2014 à 20:32
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>
0
jordane45
Messages postés
35773
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 juillet 2022
358
17 févr. 2014 à 21:00
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.
0
ksomda
Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016

19 févr. 2014 à 10:31
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?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
jordane45
Messages postés
35773
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 juillet 2022
358
Modifié par jordane45 le 19/02/2014 à 11:00
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
0
ksomda
Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016

19 févr. 2014 à 11:21
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.
0
jordane45
Messages postés
35773
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 juillet 2022
358
19 févr. 2014 à 11:24
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>

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

19 févr. 2014 à 12:08
merci grandement c'est bien ce que je cherchais.
0
jordane45
Messages postés
35773
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 juillet 2022
358
19 févr. 2014 à 13:07
Dans ce cas, merci de cliquer sur le tag : Marquer comme résolu en haut de cette discussion.
0