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.
<?php
for ($i=1;$i<=3;$i++) {
?>
<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>
<?php
}
?>
<?php
for($i=1;$i<=3;$i++){
?>
<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='<?phpecho$row['id'];?>'><?phpecho$row_scrap['naam'];?><?phpecho$row_scrap['scrap_name'];?></option> <?php}?> </select>
<?php
}
?>
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)
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.
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.
$('select.optie').Change(function(){ //als de waarde verandert voer de functie uit
if ($(this).val()=='10'){
$('#tekst1').show(); //tonen van tekst1
}
else{
$('#tekst1').hide(); //verbergen van tekst1
}
//voor de andere waarden hetzelfde
});
$('select.optie').Change(function(){//als de waarde verandert voer de functie uit
if($(this).val()=='10'){
$('#tekst1').show();//tonen van tekst1
}
else{
$('#tekst1').hide();//verbergen van tekst1
}
//voor de andere waarden hetzelfde
});
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).
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.
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.
$('select.select_class[name="optie[]"]').Change(function(){ //als de waarde verandert voer de functie uit
var numberID=$(this).attr("id").substr($(this).attr("id").indexOf("_")+1); //zoek idnummer (na select_) van deze selectbox
if ($(this).val()=='10'){
$('div#tekst_'+numberID).show(); //tonen van tekst overeenkomstig met selectbox
}
else{
$('div#tekst_'+numberID).hide(); //verbergen van tekst overeenkomstig met selectbox
}
})
$('select.select_class[name="optie[]"]').Change(function(){//als de waarde verandert voer de functie uit
var numberID=$(this).attr("id").substr($(this).attr("id").indexOf("_")+1);//zoek idnummer (na select_) van deze selectbox
if($(this).val()=='10'){
$('div#tekst_'+numberID).show();//tonen van tekst overeenkomstig met selectbox
}
else{
$('div#tekst_'+numberID).hide();//verbergen van tekst overeenkomstig met selectbox
}
})
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?
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).
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
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:
function maak_select_aan(quantity){
if (quantity<1){ //minimum
alert('kies een getal groter dan 4');
return false;
}
else{
var current_number=$('select.select_class[name="optie[]"]').length; //huidig aantal select
while (current_number>quantity){
$('select#select_'+current_number).remove(); //delete last select
current_number--;
}
while (current_number<quantity){
alert( current_number+" "+quantity);
$('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
current_number++;
}
}
}
function maak_select_aan(quantity){
if(quantity<1){//minimum
alert('kies een getal groter dan 4');
returnfalse;
}
else{
var current_number=$('select.select_class[name="optie[]"]').length;//huidig aantal select
while(current_number>quantity){
$('select#select_'+current_number).remove();//delete last select
current_number--;
}
while(current_number<quantity){
alert( current_number+" "+quantity);
$('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
current_number++;
}
}
}
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.
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.
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.
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.
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.
$('select.select_class[name="optie[]"]').live('change',function(){ //als de waarde verandert voer de functie uit
var numberID=$(this).attr("id").substr($(this).attr("id").indexOf("_")+1); //zoek idnummer (na select_) van deze selectbox
if ($(this).val()=='10'){
$('div#tekst_').show(); //tonen van tekst overeenkomstig met selectbox
}
else{
$('div#tekst_').hide(); //verbergen van tekst overeenkomstig met selectbox
}
})
$('select.select_class[name="optie[]"]').live('change',function(){//als de waarde verandert voer de functie uit
var numberID=$(this).attr("id").substr($(this).attr("id").indexOf("_")+1);//zoek idnummer (na select_) van deze selectbox
if($(this).val()=='10'){
$('div#tekst_').show();//tonen van tekst overeenkomstig met selectbox
}
else{
$('div#tekst_').hide();//verbergen van tekst overeenkomstig met selectbox
}
})
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.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
