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 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 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:

Bouton déroulant html
Html array - Conseils pratiques -PHP
Bouton grisé ✓ - Forum Javascript / DHTML
Afficher json html - Conseils pratiques -Javascript
Bouton rechercher - Forum Visual Basic
VB.net bouton rechercher SGBD Access - Forum Visual Basic

8 réponses

Réponse 1 / 8

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
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 ...

Réponse 2 / 8

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>

Réponse 3 / 8

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
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.

Réponse 4 / 8

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?

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

Posez votre question

Réponse 5 / 8

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
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

Réponse 6 / 8

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.

Réponse 7 / 8

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
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>

Réponse 8 / 8

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.

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
19 févr. 2014 à 13:07

Dans ce cas, merci de cliquer sur le tag : Marquer comme résolu en haut de cette discussion.

Discussions similaires

Activer un bouton de commande

qu'est ce que le span en html?

Fermer les balises html en fin de requete

Checkbox tableau php/html

exemple de page d'accueil avec la balise div et css

Votre réponse

Discussions similaires