login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Laat div zien als optie is geselecteerd

Offline Jointjeff - 23/11/2011 14:56
Avatar van JointjeffHTML interesse Hallo iedereen,

Ik wil graag een bepaalde div pas laten zien, wanneer een optie is geselecteerd. Nu had ik zelf al wat geprobeerd, maar het wil nog niet lukken.

Ik had tot nog toe deze code:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(document).ready(function() {
  2.  if ($('#page_template option[value="template-zaal.php"]').is(':selected')) {
  3.   jQuery('#zaal-page').show();
  4.  }
  5. });


Dit is de HTML van de select:

html code - Bekijk de code zonder highlighting - Klap code in 
  1. <select name="page_template" id="page_template">

  2.         <option value='default'>Standaard template</option>

  3. 	<option value='template-evenementen.php' >Evenementen</option>

  4. 	<option value='template-feest.php' >Feest</option>

  5. 	<option value='template-golf.php' >Golf</option>

  6. 	<option value='Untitled-28.php' >HelloWorld Page</option>

  7. 	<option value='template-home.php' >Home</option>

  8. 	<option value='template-overzichtzalen.php' >Overzichtzalen</option>

  9. 	<option value='template-personeel.php' >Personeel</option>

  10. 	<option value='template-route.php' >Route</option>

  11. 	<option value='template-zaal.php'  selected='selected'>Zaal</option></select>


Hopende op hulp! 

9 antwoorden

Gesponsorde links
Offline Ontani - 23/11/2011 15:21 (laatste wijziging 23/11/2011 15:24)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 je handled best de change event van je select:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('page_template').change(function() {
  2.   if($(this).val == "template-zaal.php") {
  3.    $('#zaal-page').show();
  4.   }
  5. });
Offline Jointjeff - 23/11/2011 15:35 (laatste wijziging 23/11/2011 15:41)
Avatar van Jointjeff HTML interesse Hallo Ontani, bedankt voor je antwoord! Heb het even wat aangepast, maar er lijkt niks te gebeuren. Ook niet als ik enkel de code die jij zojuist plaatste gebruik.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('#page_template').change(function() {
  2.  if($(this).val == "template-zaal.php") {
  3.   $('#zaal-page').show();
  4.  } else {
  5.   $('#zaal-page').hide();
  6.  }
  7. });


---- Edit -----

Heb de code nog eens aangepast, door simpelweg de '$' te vervangen met jQuery. Nu werkt het wel.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. jQuery(document).ready( function(){
  2. 	jQuery('#page_template').change(function() {
  3.   		if(jQuery(this).val == "template-zaal.php") {
  4.    			jQuery('#zaal-page').show();
  5.   		} else {
  6. 			jQuery('#zaal-page').hide();
  7. 		}
  8. 	});
  9. });


Het laatste probleem is, wanneer je een andere optie selecteerd, en dan vervolgens weer de 'template-zaal.php' dan wordt de div niet meer weergeven.
Offline vinTage - 23/11/2011 15:39
Avatar van vinTage Nieuw lid Heb je een voorbeeld online staan ?
Offline Jointjeff - 23/11/2011 15:42 (laatste wijziging 23/11/2011 15:42)
Avatar van Jointjeff HTML interesse (Heb mijn voorgaande post aangepast)

@Vintage:
Nee, ik ben dit aan het toepassen in de 'wp-admin' van WordPress.
Offline WouterJ - 23/11/2011 19:17
Avatar van WouterJ HTML gevorderde
Jointjeff schreef:
Heb de code nog eens aangepast, door simpelweg de '$' te vervangen met jQuery. Nu werkt het wel.

Dan heeft hij eerst ook gewerkt. $ en jQuery worden namelijk in het framework als volgt gedefinieerd:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. window.$ = window.jQuery = jQuery;

Dit betekend dat $ precies gelijk is aan jQuery.

Wat je nu met de if doet is kijken welke select option je hebt aangevinkt:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. if( $(this).val == 'template-zaal.php' )

Wat je beter kan doen is eerst kijken of de checkbox selected is. (met jQuery.is(':selected')) En vervolgens kijken welke select option het is.
Offline vinTage - 24/11/2011 03:33
Avatar van vinTage Nieuw lid @ Waldio, vogens mij zijn er meer frameworks (eigenlijk libs) die een $ converteren/gebruiken naar 'hun' identifier.

Als de oplossing (aanpassen naar jQuery) werkte voor de ts, dan heeft hij (denk ik) nog een lib gebruikt (bv mootools of dojo of ...)

Voor jquery bestaat daar een noConflict oplossing voor.
Offline WouterJ - 24/11/2011 09:20
Avatar van WouterJ HTML gevorderde @Vintage, dat klopt. Was ik even vergeten. Volgens mij gebruikt alleen MooTools het daarnaast nog.

Even ter informatie:
Mocht je na de jQuery.noConflict() weer opnieuw de $ willen gebruiken moet je even een globale werkomgeving oprichten:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. jQuery.noConflict();
  2. // Andere lib
  3. (function( $ ) {
  4.  
  5.   // Hierin is de $ de waarde van jQuery
  6.  
  7. })( jQuery );
  8. // Nu is de $ weer de waarde van de andere lib
Offline Jointjeff - 24/11/2011 09:37
Avatar van Jointjeff HTML interesse Het werkt toch echt alleen met jQuery in plaats van $, en volgens mij is mootools niet included.

Zou je me wat op weg kunnen helpen met de "selected"-methode? Ik heb het al wel opgezocht, maar weet niet meteen hoe ik het moet toepassen.

Bedankt voor de antwoorden!
Offline WouterJ - 24/11/2011 14:51 (laatste wijziging 24/11/2011 14:51)
Avatar van WouterJ HTML gevorderde @Jointjeff, in jou eigen voorbeeld maak je gebruik van de ':selected':
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. if ($('#page_template option[value="template-zaal.php"]').is(':selected')) {

I.p.v. het element helemaal ophalen gebruik je nu jQuery(this):
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. (function( $ ) {
  2.   // Zorg dat we gewoon $ kunnen gebruiken
  3.   $('#page_template').on('click', 'option', function() {
  4.     var elem = $(this);
  5.     if( elem.is(':selected') ) {
  6.       // Element is aangevinkt
  7.       // Doe iets leuks...
  8.     }
  9.   });
  10. })( jQuery );

Let wel op dat ik hier gebruik maak van jQuery.on(). Deze functie is nieuw in 1.7.0, dus zorg dat je die inlaad of gebruik de gewone oude jQuery.click() methode.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.201s