login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Dynamische selectbox met verborgen divs (dynamisch) (Opgelost)

Offline Ruultje - 14/02/2011 10:14
Avatar van RuultjeNieuw lid Ik kom nog met één laatste (voorlopig) probleem.

Ik heb een selectbox die vaker wordt weergegeven. Bij enkele opties toont hij een verborgen div met input text veld waarin iets neergezet kan worden. Nu werkt dit wel, maar enkel bij de eerste selectbox. Bij de overige werkt het niet.

Deze is in Javascript. Maar zal via een array (denk ik?) moeten werken. Kom daar alleen niet uit.

Dit de JS:
  1. function bekijkOpties() {
  2. if(document.getElementById('voorbeeld').value == '10'){
  3. document.getElementById('Tekst1').style.display='block';
  4. } else {document.getElementById('Tekst1').style.display='none';}
  5.  
  6. if(document.getElementById('voorbeeld').value == '12'){
  7. document.getElementById('Tekst2').style.display='block';
  8. } else {document.getElementById('Tekst2').style.display='none';}
  9.  
  10. if(document.getElementById('voorbeeld').value == '25'){
  11. document.getElementById('Tekst3').style.display='block';
  12. } else {document.getElementById('Tekst3').style.display='none';}
  13.  
  14. if(document.getElementById('voorbeeld').value == '16'){
  15. document.getElementById('Tekst4').style.display='block';
  16. } else {document.getElementById('Tekst4').style.display='none';}
  17.  
  18. }


Hij wordt dus drie keer weergegeven:
  1. <?php
  2. for ($i=1;$i<=3;$i++) {
  3. ?>
  4. <select id='optie' name='optie[]' class='choice' onchange='bekijkOpties()'><option>Selecteer optie</option> <?php $sql = "SELECT id, naam FROM testtabel"; $result = mysql_query($sql) or die (mysql_error()); while ($row = mysql_fetch_array($result_scrap)){ ?> <option value='<?php echo $row['id']; ?>'><?php echo $row_scrap['naam']; ?> <?php echo $row_scrap['scrap_name']; ?></option> <?php } ?> </select>
  5. <?php
  6. }
  7. ?>


Ik ben van het weekend in de jQuery stuff gedoken maar ben er nog niet helemaal uit (wel weer iets wijzer geworden). Blijf zelf uiteraard wel zoeken voor een oplossing voor dit 'probleem'. Maar met de tips van hier kan ik meer (omdat het specifiek over dit 'probleem' gaat). Kan ook zijn dat ik nu verkeerd zoek overigens (zoek op dynamische selectbox)

23 antwoorden

Gesponsorde links
Offline Frisbee - 14/02/2011 14:58 (laatste wijziging 14/02/2011 15:00)
Avatar van Frisbee HTML beginner Het probleem is dat de drie select boxen die je nu toont alle drie hetzelfde id hebben, deze zal je uniek moeten maken en dan aan de functie meegeven welk id je checkt.

Je krijgt dan dus zoiets:

  1. function bekijkOpties(select_id) {
  2. if(document.getElementById(select_id).value == '10'){
  3. document.getElementById('Tekst1').style.display='block';
  4. } else {document.getElementById('Tekst1').style.display='none';}
  5.  
  6. if(document.getElementById(select_id).value == '12'){
  7. document.getElementById('Tekst2').style.display='block';
  8. } else {document.getElementById('Tekst2').style.display='none';}
  9.  
  10. if(document.getElementById(select_id).value == '25'){
  11. document.getElementById('Tekst3').style.display='block';
  12. } else {document.getElementById('Tekst3').style.display='none';}
  13.  
  14. if(document.getElementById(select_id).value == '16'){
  15. document.getElementById('Tekst4').style.display='block';
  16. } else {document.getElementById('Tekst4').style.display='none';}
  17.  
  18. }


  1. <?php
  2. for ($i=1;$i<=3;$i++) {
  3. ?>
  4. <select id='optie<?php echo $i; ?>' name='optie<?php echo $i; ?>' class='choice' onchange='bekijkOpties("optie<?php echo $i; ?>")'><option>Selecteer optie</option> <?php $sql = "SELECT id, naam FROM testtabel"; $result = mysql_query($sql) or die (mysql_error()); while ($row = mysql_fetch_array($result_scrap)){ ?> <option value='<?php echo $row['id']; ?>'><?php echo $row_scrap['naam']; ?> <?php echo $row_scrap['scrap_name']; ?></option> <?php } ?> </select>
  5. <?php
  6. }
  7. ?>
Offline Ruultje - 15/02/2011 08:49
Avatar van Ruultje Nieuw lid Bedankt. Zal er naar kijken. Gisteren werkte het niet. Op de één of andere manier heb ik er iets uitgehaald en dat ook opgeslagen waardoor er helemaal niks meer van klopte. Gaf telkens een foutmelding (onder in de statusbalk).

Vraag mij nu overigens af hoe ik een via javascript/jquery iets dynamisch krijg. Dus dat de div id aan de hand van jQuery wordt bepaald.

Bedankt voor deze. Hier kom ik wel mee vooruit.
Offline Beirensg - 15/02/2011 11:02
Avatar van Beirensg HTML beginner Je kan dit relatief makkelijk met JQuery:
  1. $('select.optie').Change(function(){ //als de waarde verandert voer de functie uit
  2. if ($(this).val()=='10'){
  3. $('#tekst1').show(); //tonen van tekst1
  4. }
  5. else{
  6. $('#tekst1').hide(); //verbergen van tekst1
  7. }
  8. //voor de andere waarden hetzelfde
  9. });


Let wel op ik heb de selectboxen allemaal dezelfde klasse gegeven (.optie), hierdoor heb je geen problemen meer met de ID (JQuery geeft automatisch een ID) en kan je verder refereren met $(this).
Offline Ruultje - 16/02/2011 08:39
Avatar van Ruultje Nieuw lid Ben hier gisteren mee aan de gang gegaan, maar op de één of andere manier werkt het nog niet 100% goed.

Misschien moet ik hier iets anders doen (heb hem even korter gemaakt om te testen)

  1. <?php
  2. for ($i=1;$i<=3;$i++) {
  3. ?>
  4. <select id='tekst1' name='optie[]' class='choice'><option>Selecteer optie</option> <option value='10'>Test</option> </select>
  5.  
  6. <div id="tekst1" style="border:solid1px black;height:50px;width:100%"> test </div>
  7. <br/><br/>
  8. <?php
  9. }
  10. ?>



Hij toont ze nu allemaal of allemaal niet. Dus als ik de derde selectbox pak dan zet hij hem ook bij de eerste weg etc.
Offline Ontani - 16/02/2011 08:45
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1
probeer die tekst1 eens te vervangen door tekst$i
Offline Beirensg - 16/02/2011 08:48
Avatar van Beirensg HTML beginner en je moet de div en de select een best een verschillende id geven. je kan dan in jquery op id selecteren (anders wordt het moeilijk).
Ik zal in de loop van de dag hier nog eens naar kijken. 
Offline Ruultje - 16/02/2011 09:02
Avatar van Ruultje Nieuw lid
Ontani schreef:
probeer die tekst1 eens te vervangen door tekst$i


Werkt, helaas, ook niet.

Beirensg schreef:
en je moet de div en de select een best een verschillende id geven. je kan dan in jquery op id selecteren (anders wordt het moeilijk).
Ik zal in de loop van de dag hier nog eens naar kijken. 


Oké ga dit in ieder geval al doen (proberen). Bedankt weer.

Het meeste begrijp ik nu wel. Probleem blijft alleen het dynamische. Op de één of andere manier geraak ik daar niet uit.
Offline Beirensg - 16/02/2011 17:11 (laatste wijziging 16/02/2011 17:12)
Avatar van Beirensg HTML beginner Aanmaken van de selectboxen en de div tekst

  1. <?php
  2. for ($i=1;$i<=3;$i++) {
  3. echo "<select class='select_class' id='select_".$i."' name='optie[]' class='choice'>";
  4. echo "<option>Selecteer optie</option>";
  5. echo "<option value='10'>Test</option>";
  6. echo "</select>";
  7.  
  8. echo "<div id='tekst_".$i."' style='border:solid1px black;height:50px;width:100%'>test</div>";
  9. echo "<br/><br/>";
  10. }
  11. ?>


nu zijn er 3 selectboxen (select_1,select_2 en select_3) samen met 3 tekstdivs (tekst_1 tot en met tekst_3)

Nu kan je een functie in Jquery maken die per selectbox nagaat of de waarde correct is en dan toont deze de overeenkomende tekstdiv:


  1. $('select.select_class[name="optie[]"]').Change(function(){ //als de waarde verandert voer de functie uit
  2. var numberID=$(this).attr("id").substr($(this).attr("id").indexOf("_")+1); //zoek idnummer (na select_) van deze selectbox
  3. if ($(this).val()=='10'){
  4. $('div#tekst_'+numberID).show(); //tonen van tekst overeenkomstig met selectbox
  5. }
  6. else{
  7. $('div#tekst_'+numberID).hide(); //verbergen van tekst overeenkomstig met selectbox
  8. }
  9. })


Dit zou moeten werken. Maar ik heb nog een vraag ivm de verschillende selectboxen, hebben deze ook verschillende opties of blijven deze dezelfde. En moet er anders gereageerd worden op de geselecteerde waarde?

Hopelijk geraak je nu verder  
Bedankt door: Ruultje
Offline Ruultje - 17/02/2011 08:35
Avatar van Ruultje Nieuw lid Deze werkt!

De opties zijn allemaal hetzelfde. Maar het kan zijn dat er vier (bijvoorbeeld) verschillende oorzaken zijn. De geselecteerde waarde is dan anders. Bij een optie komt altijd een veld waarin een waarde ingevuld moet worden, die kan verschillen. Er zijn dus een paar opties waarin uitleg bij gegeveven kan worden.

Ik heb zelf ook nog een vraag. Ik heb een mogelijkheid gemaakt dat er aangegeven kan worden hoeveel selectboxen er getoond moeten worden. Dat kunnen er dus 4 zijn maar ook bijvoorbeeld 6. Dat getal geef ik in via een inputveld. Wanneer ik daar het getal heb ingevuld opent hij dat aantal selectboxen. Via een while loop in php (de keuze van het inputveld) wordt de selectbox dus het aantal keren getoond. In deze vervalt dan dus de forloop (en ook de $i). Is het mogelijk om de waarde vanuit php (die $i dus) te vervangen door een javascript waarde. Dus als er dan 2 zijn dat hij die alle 2 een eigen id geeft (zoals de $i doet).
Offline Beirensg - 17/02/2011 09:26
Avatar van Beirensg HTML beginner Oei dat is iets moeilijker te implementeren. Je zal hiervoor best ajax gebruiken. aangezien je een waarde van de gebruiker naar de server moet transfereren.

bvb een onchange event op de text-box (change in jquery) dewelke een xmlhttp element aanmaakt en deze naar een php-file zendt. In de php-file kan je deze dan in een globale variabele plaatsen bvb $_SESSION['aantal_select']
Deze laatste kan je dan aanroepen op je normale pagina.

opm1: Ajax is mss niet echt nodig als je de pagina toch refresh, je kan deze dan ook gewoon in de url meezenden.
opm2: onchange-event kan je mss best vervangen door het klikken op een knop
Offline Ruultje - 17/02/2011 10:56
Avatar van Ruultje Nieuw lid Wat betreft het in de ulr meezenden. Aan die optie zat ik te denken. Alleen zal ik dat ook weer meoten uitzoeken ;)

De process.php is de de selectbox die hier al staat. Alleen dan zonder die forloop (vanuit de database).

Daar zit dus wel een aantal bij alleen in Post.

Dit is trouwens wat ik heb (Javascript code heb ik trouwens van het forum hier)
  1. <div class="regtext">
  2. <input type='text' class='field' name='aantal' onkeyup="toonVelden()">
  3. </div>
  4. <div class="gegevens">
  5. <div id="spelersVelden"></div>
  6. </div>



  1. <script type="text/javascript">
  2. function toonVelden(){
  3. aantalSpelers = document.getElementById("aantal").value;
  4. veldenHTML = "";
  5. for(i=1;i<=aantalSpelers;i++){
  6. veldenHTML += "<div class='spacer1'></div>"
  7. veldenHTML += "<h1 class='sfield'>Opties:</h1>"
  8. veldenHTML += "<div class='reghead'>Scrap:</div><div class='shiftregtext'><?php require_once ("process.php"); ?></div>"
  9. veldenHTML += "<div class='spacer'></div>"
  10. veldenHTML += "<div id='tekst' style='display:none;'> <div class='reghead'>Tekst1:</div><div class='regtext'><input type='text' class='select_class' name='optie[]' id='select_' class='choice'> </div> </div>"
  11. veldenHTML += "<div class='spacer'></div>"
  12. veldenHTML += "<div class='reghead'>Waarde:</div><div class='regtext'><input type='text' class='field' name='waarde[]'> </div>"
  13. veldenHTML += "<div class='spacer'></div>"
  14. }
  15. document.getElementById("spelersVelden").innerHTML = veldenHTML;
  16. }
  17. </script>
Offline Beirensg - 17/02/2011 11:14 (laatste wijziging 17/02/2011 13:52)
Avatar van Beirensg HTML beginner Ik heb misschien nog een andere oplossing, waarom laat je JQuery geen extra selectboxen aanmaken, dan moet je niets van gegevens terugzenden.
Het minimum laat je aanmaken door php (op de server), bvb 4. En indien de gebruiker een ander aantal wenst, dan kan je jquery zeggen dat hij er moet aanmaken:

stel in de code
edited
  1. function maak_select_aan(quantity){
  2. if (quantity<1){ //minimum
  3. alert('kies een getal groter dan 4');
  4. return false;
  5. }
  6. else{
  7. var current_number=$('select.select_class[name="optie[]"]').length; //huidig aantal select
  8. while (current_number>quantity){
  9. $('select#select_'+current_number).remove(); //delete last select
  10. current_number--;
  11. }
  12. while (current_number<quantity){
  13. alert( current_number+" "+quantity);
  14. $('select#select_1').clone().attr("id",'select_'+(current_number+1)).appendTo( $('select#select_1').parent()); //make new select and put in container of other selects
  15. current_number++;
  16. }
  17. }
  18. }


Dit zou ongeveer moeten werken, ik heb dit maar snel geschreven, maar je kan het altijd eens testen.

Pas op ik ga ervan uit dat je dezelfde id's gebruikt als dewelke ik deed in mijn vorig script.
Offline Ruultje - 17/02/2011 12:46
Avatar van Ruultje Nieuw lid Plaatscode: 140692

Ben bang dat er nu helemaal niks van klopt. Hij geeft overigens ook een foutmelding in IE:

Message: Expected ')'
Line: 26
Char: 74
Code: 0
Offline Beirensg - 17/02/2011 12:52 (laatste wijziging 17/02/2011 13:45)
Avatar van Beirensg HTML beginner Ik was een ' vergeten in lijn 13 (uw lijn 26) heb ik nu aangepast.

Ga nog een beetje verder testen

edit
er zaten wel degelijk een paar fouten in (komt ervan als je code schrijft zonder te testen). Volgende link toont de herwerkte versie in JSFiddle:


deze werkthttp://jsfiddle.net/beirensg/dyVR4/
Offline Ruultje - 17/02/2011 13:43
Avatar van Ruultje Nieuw lid Ik dacht zelf dat het aan een ) lag. Foutmelding is er inderdaad uit. Probeer zelf ook te 'puzzelen' maar nog zonder succes.
Offline Beirensg - 17/02/2011 13:47 (laatste wijziging 17/02/2011 13:47)
Avatar van Beirensg HTML beginner heb de link aangepast in mijn post. De correcte link is wel degelijk:
http://jsfiddle.net/beirensg/dyVR4/

misschien moet je wel op run drukken 
Offline Ruultje - 17/02/2011 14:25
Avatar van Ruultje Nieuw lid Deze werkt! Bedankt weer. Vind de jQuery ook wat beter met deze aangezien ik met het andere script problemen had met de selectbox (moest alles achter elkaar plakken want wanneer ik op een andere regel verder ging kreeg ik een syntax error). Dat is met deze sowieso niet.

Nu zie ik alleen dat extra opties (bij 10) niet meer wordt weergegeven.
Offline Beirensg - 17/02/2011 14:48
Avatar van Beirensg HTML beginner het eerste script had problemen (te weinig accolades, haakjes, typfouten,..), te snel willen zijn. Nu werkt het wel, dat is goed.

Die extra opties, is dat de div die je wilt laten verdwijnen en tonen? Want ik denk dat er per extra seelct ook een div zou moeten aangemaakt worden. want anders zal de id niet meer kloppen.
Offline Ruultje - 17/02/2011 15:15
Avatar van Ruultje Nieuw lid Gaat het inderdaad om de div te tonen of weer te verwijderen. Ben wel aan het zoeken op Google, maar op de één of andere manier vind ik niks. Verkeerde zoektermen misschien.
Offline Beirensg - 17/02/2011 15:47
Avatar van Beirensg HTML beginner het is normaal dat deze niet meer getoond wordt. de id van deze is immers "tekst_" (zonder nummer)
terwijl de functie change voor de selectboxen de id '"tekst_"+x' (met x het volgnummer van de select) voorschrijft.

als je deze code gebruikt gaat het beter gaan:
  1. $('select.select_class[name="optie[]"]').live('change',function(){ //als de waarde verandert voer de functie uit
  2. var numberID=$(this).attr("id").substr($(this).attr("id").indexOf("_")+1); //zoek idnummer (na select_) van deze selectbox
  3. if ($(this).val()=='10'){
  4. $('div#tekst_').show(); //tonen van tekst overeenkomstig met selectbox
  5. }
  6. else{
  7. $('div#tekst_').hide(); //verbergen van tekst overeenkomstig met selectbox
  8. }
  9. })

hier ga ik ervan uit dat je maar 1 div hebt. Indien je echter 1 div per select hebt zal je toch de id van de iv moeten veranderen naar 'tekst_x' (x het volgnr). En als je selects bijmaakt of verwijdert meot je dit ook doen voor de divs anders zal er een fout optreden.
Offline Ruultje - 17/02/2011 17:45
Avatar van Ruultje Nieuw lid Dus de div zal ik dan zo moeten maken

<div id='tekst_1'> </div>
<div id='tekst_2'> </div>

Werkte zojuist nog niet. Maar blijf proberen.
Offline Beirensg - 17/02/2011 17:58
Avatar van Beirensg HTML beginner probeer mijn aangepaste versie eens op jsfiddle. Ik denk dat dit hetgeen is wat je wilt:
http://jsfiddle.net/beirensg/dyVR4/

Normaal zou nu alles moeten werken 
Offline Ruultje - 17/02/2011 21:15
Avatar van Ruultje Nieuw lid Deze werkt super!! Is precies wat ik wil!

Ben je wederom zeer dankbaar!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.244s