[jQuery] Divje tonen bij kiezen in selectbox

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

- Ariën  -
Beheerder

- Ariën -

19/01/2011 14:51:12
Quote Anchor link
Ik heb een mooie zoekfunctie gebouwd, en ik wil als men in de pulldown kiest voor de value="nieuws", dat men dan een extra divje/HTML-element krijgt. En dat deze bij een andere keuze weer verdwijnt?

Hoe krijg ik dat ook alweer voor elkaar in jQuery?
 
PHP hulp

PHP hulp

25/12/2024 05:34:12
 
Thijs Damen

Thijs Damen

19/01/2011 15:01:25
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
$('select').change(function() {
  selected = $(':selected', $(this));
  if (selected.val() == "nieuws") {
    $('#divje').show();
  } else {
    $('#divje').hide();
  }
});



Waarom niet:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('select option[value=nieuws]').click(function(){});
??
Omdat je ook met toetsenbord een selectset kan navigeren.
Gewijzigd op 19/01/2011 15:01:38 door Thijs Damen
 
- Ariën  -
Beheerder

- Ariën -

19/01/2011 15:05:58
Quote Anchor link
Ik ga d'r mee aan de slag zo...

Bedankt....
 
- Ariën  -
Beheerder

- Ariën -

25/01/2011 11:24:01
Quote Anchor link
Dit werkt niet:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<script>
    $('#keuze').change(function() {
       $('#extra').hide();    
       selected = $(':selected', $(this));

      if (selected.val() == "nieuws") {
          $('#extra').show();
      } else {
          $('#extra').hide();
      }
    });
    </script>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<form>
     <select id="keuze">
        <option value="-">Maak je keuze...</option>
        <option value="nieuws">Nieuws</option>
     </select>
    </form>
    <div id="extra">

    Trolololol
    </div>


het divje: <div id="extra"> blijft zichtbaar.
How come?

Iemand een idee?
Gewijzigd op 25/01/2011 11:24:53 door - Ariën -
 
Thijs Damen

Thijs Damen

25/01/2011 11:29:48
Quote Anchor link
Omdat je javascript niet in de document ready staat.

De code zelf werkt wel.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
$(function() {
$('#keuze').change(function() {
    $('#extra').hide();    
    selected = $(':selected', $(this));

   if (selected.val() == "nieuws") {
       $('#extra').show();
   } else {
       $('#extra').hide();
   }
 });
});
 </script>
 
Gerhard l

gerhard l

25/01/2011 11:30:28
Quote Anchor link
gaat het om 1 div die met 1 geklik geshowed en gehide word?
 
- Ariën  -
Beheerder

- Ariën -

25/01/2011 11:32:18
Quote Anchor link
Hm, die stond er wel in de code hier, even opnieuw ge-copypast, volgens mij was het een typfout.

Lijkt te werken.
Gewijzigd op 25/01/2011 11:32:44 door - Ariën -
 
Thijs Damen

Thijs Damen

25/01/2011 11:34:44
Quote Anchor link
ik heb je code voorbeeld 1op1 overgenomen met een doc.ready en het werkte gewoon.

succes!
 
- Ariën  -
Beheerder

- Ariën -

25/01/2011 11:43:39
Quote Anchor link
Geen idee wat het wel was, maar het werkt in ieder geval.
Gewijzigd op 25/01/2011 11:43:55 door - Ariën -
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.