Admin area parent id select list

[gap_tooth_clan]

I have a site that will have potentially hundreds of pages so the drop down list in the admin area would be a nightmare to handle so I thought the list would be great if it was ajaxed up and dynammically showed the parent child items and siblings that are relevant.

in the meantime I coded using jquery a list it currently only works with 3 levels of hierarchy and probably needs a bit of tweaking but the code below could be useful. Add this to edit and add content as a javascript include you will also need the jquery library.

Code: Select all

function hierarchySelectList(hierarchyChk,val){
	$dd = $("select#parent_id_src");
	if ($dd.length > 0) { // make sure we found the select we were looking for

		// save the selected value
		var selectedVal = $dd.val();
	
		// get the options and loop through them
		var $options = $('option', $dd);
		var arrVals = [];
		$options.each(function(){
			//get the hierarchy
			text = $(this).text();
			textpos = (text.indexOf(' - ')-1);
			hierarchy = (text.substring(0,textpos));
			// push each option value and text into an array
			arrVals.push({
				val: $(this).val(),
				text: $(this).text(),
				hierarchy: hierarchy
			});
		});
	
		// sort the array by the value (change val to text to sort by text instead)

		newOptions = "";
		// loop through the sorted array and set the text/values to the options
		// work out what parent and what child items should be showing
		for (var i = 0, l = arrVals.length; i < l; i++) {
			//$($options[i]).val(arrVals[i].val).text(arrVals[i].text);
			
			checkHier = arrVals[i].hierarchy.length;

			if (arrVals[i].hierarchy.length < 2){
				newOptions += '<option value="'+arrVals[i].val+'" style="color:#024b67;font-weight:900;">'+arrVals[i].text+'</option>';
				
			} else if ((hierarchyChk.length == 2 || hierarchyChk.length == 4) && (arrVals[i].hierarchy.length == 3 && arrVals[i].hierarchy.substring(0,2) == hierarchyChk.substring(0,2))){
				newOptions += '<option value="'+arrVals[i].val+'" style="color:#00adef;font-weight:900;">'+arrVals[i].text+'</option>';
			
			} else if ((hierarchyChk.length == 4 || hierarchyChk.length == 6) && (arrVals[i].hierarchy.length == 5 && arrVals[i].hierarchy.substring(0,4) == hierarchyChk.substring(0,4))){
				newOptions += '<option value="'+arrVals[i].val+'" style="color:#a2ddf3;font-weight:900;">'+arrVals[i].text+'</option>';

			} else if (hierarchyChk.length == 6 && (arrVals[i].hierarchy.length == 3 && arrVals[i].hierarchy.substring(0,2) == hierarchyChk.substring(0,2))){
				newOptions += '<option value="'+arrVals[i].val+'" style="color:#00adef;font-weight:900;">'+arrVals[i].text+'</option>';

			} else {
				//newOptions += '<option value="'+arrVals[i].val+'" style="display:none;visible:none;color:#ffffff;">'+arrVals[i].text+'</option>';
			}
			
		}
		//empty drop down and add relavant options
		$("select#parent_id").empty();
		$("select#parent_id").append(newOptions);
		
		// set the selected value back
		$("select#parent_id").val(val);//(selectedVal);
	}
}

$(document).ready(function() {					   
	
	$("select[name*='parent_id']").attr('id','parent_id').clone(true).insertAfter("select[name*='parent_id']");
	$("select[name*='parent_id']:last").attr({name:"parent_id_src", id:"parent_id_src"}).css("display","none");

    //cloneSelect = $("select[name*='parent_id']").clone(true);
	//cloneSelect.insertAfter("select[name*='parent_id']");
	//$("select[name*='parent_id']:last").attr('name','parent_id_cpy').css("display","none");
	
	hierarchySelectList(0);
	
	
	$("select#parent_id").change(function () { 															
		val = $(this).val();	// value of select			
		text = $("option[value*='"+val+"']").text();
		textpos = (text.indexOf(' - '));
		hierarchyChk = (text.substring(0,textpos));									
		hierarchySelectList(hierarchyChk,val);
	});

});