Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

[JQuery] Selectbox disabled totdat een waarde bij andere selectbox is gekozen

jc2 - 13/10/2009 22:09 (laatste wijziging 13/10/2009 22:54)

PHP interesse

Ik heb de volgende code van jqueryui.com gedownload om toe te passen op mijn site:

javascript code - Bekijk de code zonder highlighting - Klap code in

                	function makeSublist(parent,child,isSubselectOptional,childVal)
	{
		$("body").append("<select style='display:none;' id='"+parent+child+"'></select>");
		$('#'+parent+child).html($("#"+child+" option"));
	
		var parentValue = $('#'+parent).attr('value');
		$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
	
		childVal = (typeof childVal == "undefined")? "" : childVal ;
		$("#"+child).val(childVal).attr('selected','selected');
	
		$('#'+parent).change(function(){
			var parentValue = $('#'+parent).attr('value');
			$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
			if(isSubselectOptional) $('#'+child).prepend("<option value='none' selected='selected'> -- Select -- </option>");
	
			$('#'+child).trigger("change");
			$('#'+child).focus();
		});
	}

            
function makeSublist(parent,child,isSubselectOptional,childVal)
	{
		$("body").append("<select style='display:none;' id='"+parent+child+"'></select>");
		$('#'+parent+child).html($("#"+child+" option"));
 
		var parentValue = $('#'+parent).attr('value');
		$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
 
		childVal = (typeof childVal == "undefined")? "" : childVal ;
		$("#"+child).val(childVal).attr('selected','selected');
 
		$('#'+parent).change(function(){
			var parentValue = $('#'+parent).attr('value');
			$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
			if(isSubselectOptional) $('#'+child).prepend("<option value='none' selected='selected'> -- Select -- </option>");
 
			$('#'+child).trigger("change");
			$('#'+child).focus();
		});
	}
 

Ik heb namelijk 3 selectboxen die ik afhankelijk gemaakt heb van elkaar. Dit wil zeggen dat wanneer je in selectbox 1 een waarde selecteert, selectbox 2 wordt gevuld met waardes die betrekking hebben op de keuze bij selectbox 1.
Voor selectbox 3 geldt hetzelfde, maar dan met betrekking tot selectbox 2.
Nu is het zo dat alle 3 de selectboxen standaard enabled weergeven worden, ook wanneer selectbox 2 of 3 geen waarde bevatten.
Nu wil ik dat selectbox 2 pas geënabled wordt wanneer er bij selectbox 1 een keuze gemaakt is én dat selectbox 3 geënabled wordt wanneer er bij selectbox 2 een keuze gemaakt.

Update:
Inmiddels heb ik voor elkaar gekregen dat de selectboxen afhankelijk zijn van elkaar en geënabled worden wanneer selectbox 1 gewijzigd wordt.
Nu wil ik ook dat wanneer selectbox 2 geen waarde heeft, de selectbox gedisabled blijft.
Ik heb dit zo geprobeerd:

javascript code - Bekijk de code zonder highlighting - Klap code in

                		$('#'+parent).change(function(){
			if ( $('#'+child).selectedValues() == false) {
			$('#'+child).attr("disabled",false);
			var parentValue = $('#'+parent).attr('value');
			$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
	
			$('#'+child).trigger("change");
			$('#'+child).focus();
			}
			else{	
			$('#'+child).attr("disabled",true);
			var parentValue = $('#'+parent).attr('value');
			$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
	
			$('#'+child).trigger("change");
			$('#'+child).focus();
			}
		});

            
$('#'+parent).change(function(){
			if ( $('#'+child).selectedValues() == false) {
			$('#'+child).attr("disabled",false);
			var parentValue = $('#'+parent).attr('value');
			$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
 
			$('#'+child).trigger("change");
			$('#'+child).focus();
			}
			else{	
			$('#'+child).attr("disabled",true);
			var parentValue = $('#'+parent).attr('value');
			$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
 
			$('#'+child).trigger("change");
			$('#'+child).focus();
			}
		});
 

Helaas krijg ik dan deze foutmelding:
Deze eigenschap of methode wordt niet ondersteund door dit object.

Weten jullie hoe je met JQuery kunt controleren of een selectbox leeg is of niet?

2 antwoorden

Gesponsorde links

Rik - 14/10/2009 10:37

Crew algemeen

Even wat geprobeerd:

html code - Bekijk de code zonder highlighting - Klap code in

                <form>
	<select multiple="multiple" name="test">
		<option value="bla0">bla</option>
		<option value="bla1">bla</option>
		<option value="bla2">bla</option>
		<option value="bla3">bla</option>
	</select>
</form>
<a id="check" href="#" />check</a>
            
<form>
	<select multiple="multiple" name="test">
		<option value="bla0">bla</option>
		<option value="bla1">bla</option>
		<option value="bla2">bla</option>
		<option value="bla3">bla</option>
	</select>
</form>
<a id="check" href="#" />check</a>
 

js code - Bekijk de code zonder highlighting - Klap code in

                $('document').ready(function () {
	$('#check').click(function () {
	    alert($('select option:selected').length);
	});
});
            
$('document').ready(function () {
	$('#check').click(function () {
	    alert($('select option:selected').length);
	});
});
 

Dus als $('select option:selected').length 0 teruggeeft is er niets geselecteerd. Daar moet je alleen nog even je eigen parent / child selectie van maken.

Die fout die je krijgt, daar zou een regelnummer bij moeten staan. Nu is het een beetje gissen waar het fout gaat.

jc2 - 14/10/2009 16:28 (laatste wijziging 16/10/2009 16:29)
PHP interesse		Ik heb de code zoals hij nu is online gezet, met een flash-animatie van hoe ik het ongeveer zou willen hebben. Hij is te bezichtigen op deze pagina. Door op de rechtermuisknop te klikken, kun je de javascript- en HTML-code bekijken. De code zelf is bewerkt a.d.h.v. de originele code van: AjaxRay.com. Update: Ik zou graag willen dat op het moment dat je de pagina laadt, enkel de provincie-selectbox actief is. Op het moment dat je dan een provincie gekozen hebt, moet de gemeente-selectbox actief worden, indien deze selectbox NIET leeg is. Heb je dan een gemeente gekozen, dan moet je een plaats kunnen selecteren, behalve wanneer de plaats-selectbox leeg is. En zo uiteindelijk hetzelfde voor het schooltype. Wie heeft een idee hoe ik dit kan bereiken? De manier van Rik heeft helaas niet geholpen.

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten