Suppression des options dans select selon le choix de valeur

**jahounna** · 07/03/2016, 16h06

je suis entrain de tester un code qui contient deux select avec les mêmes options donc je veux si je select une valeur elle doit être supprimer de l’autre select j'ai trouver la solution avec jquery mais elle ne fonctionne pas pour moi !!!!
http://jsfiddle.net/0k1k9ysj/1/

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" >
$("#first").change(function() {
    if($("#first").val() != "none") {
        $("#second option[value!="+$("#first").val()+"]").show();
        $("#second option[value="+$("#first").val()+"]").hide();
    } else {
        $("#second option[value!="+$("#first").val()+"]").show();
    }
    $("#second").val('none');
});
 
$("#second").change(function() {
    if($("#second").val() != "none") {
        $("#first option[value!="+$("#second").val()+"]").show();
        $("#first option[value="+$("#second").val()+"]").hide();
    } else {
        $("#first option[value!="+$("#second").val()+"]").show();
    }
    $("#first").val('none');
});
</script>
</head>
 
<body>
 
<select id="first"  >
    <option value="none">None</option>
    <option value="one">Toyota</option>
    <option value="two">Nissan</option>
    <option value="three">Dodge</option>
</select>
 
<select id="second">
    <option value="none">None</option>
    <option value="one">Toyota</option>
    <option value="two">Nissan</option>
    <option value="three">Dodge</option>
</select>
 
</body>
</html>

**danielhagnoul** · 07/03/2016, 20h06

Fonctionne très bien lorsqu'on n'oublie pas que l'on doit attendre que le DOM soit construit (ready) :

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
19
20
21
22
23
24
25
26
27
28
<script>
  'use strict';
 
  $( function(){
 
    $("#first").change(function() {
        if($("#first").val() != "none") {
            $("#second option[value!="+$("#first").val()+"]").show();
            $("#second option[value="+$("#first").val()+"]").hide();
        } else {
            $("#second option[value!="+$("#first").val()+"]").show();
        }
        $("#second").val('none');
    });
 
    $("#second").change(function() {
        if($("#second").val() != "none") {
            $("#first option[value!="+$("#second").val()+"]").show();
            $("#first option[value="+$("#second").val()+"]").hide();
        } else {
            $("#first option[value!="+$("#second").val()+"]").show();
        }
        $("#first").val('none');
    });
 
  });
 
</script>

**jahounna** · 08/03/2016, 14h59

merci bien

Suppression des options dans select selon le choix de valeur

jQuery

Vue hybride

Discussions similaires

Partager

Partager