Discussion :

[Anibel]

Bonjour tout le monde,

J'ai la liste déroulante suivante:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<select name="status" id="status" >
     <option>Select...</option>
     <option value="1">Awaiting</option>
     <option value="2">Starting</option>
     <option value="3">Ongoing</option>
     <option value="4">On hold</option>
     <option value="5">Finishing</option>
     <option value="6">Add</option>
</select>

Je veux savoir comment ouvrir une boite de dialog Jquery en cliquant sur "Add" .

Merci d'avance

[royto]

Salut,

Voici le code qui permet de faire ça (ouvrant un dialog jQuery UI).

Code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<select name="status" id="status" >
     <option>Select...</option>
     <option value="1">Awaiting</option>
     <option value="2">Starting</option>
     <option value="3">Ongoing</option>
     <option value="4">On hold</option>
     <option value="5">Finishing</option>
     <option value="6">Add</option>
</select>
 
<div id="dialog" class>
    Je suis une boite de dialogue
</div>

Code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$( "#dialog" ).dialog({
    dialogClass: "no-close",
    autoOpen: false,
    buttons: [
    {
        text: "OK",
        click: function() {
            $( this ).dialog( "close" );
        }
    }
    ]
});
 
$('#status').on('change', function() {
    if($(this).val() == 6) {
        $( "#dialog" ).dialog( "open" );
    }
});

[Anibel]

Merci pour votre réponse, mais le code ne fonctionne pas !

Pourquoi la balise select n'est pas à l'intérieur de la balise div ?

[royto]

as tu insérer le lien vers la librairie jquery ui (a telecharger ici) ?

la div est le contenu de la boite de dialogue. tu peux y mettre n'importe quel élément HTML comme par exemple une textbox.

[Anibel]

J'ai inséré le lien vers la librairie jquery mais pas de résultat !

[Anibel]

j'ai résolu le problème, il suffit d'insérer la ligne suivante :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(function() {
.....................
});