Make WordPress Parent level drop-down on back-end unclickable

0 Views

Im using Custom fields & WordPress taxonomies to pull in product sub categories & sub categories on wordpress for a product system. However I’m having problems with the drop-down box I am using that pulls in my categories.

The structure is like so:

Read More
 1 Main Category
 ..2 Sub Category
 ....3 Sub-Sub Category
 .......4 Product
 ....3 Sub-Sub Category
 ....3 Sub-Sub Category
 ..2 Sub Category
 ....3 Sub-Sub Category
 ..2 Sub Category
 ....3 Sub-Sub Category

“1 Main Category” Is my taxonomy and is simply for grouping products
“2 Sub Category” Is for further grouping of products
“3 Sub-Sub Category” Is the actual category products will be put into

The HTML rendered out for the dropdown box on the CMS is like so: 

<select name="fields[field_50cb3df056694][]" id="fields[field_50cb3df056694]" class="taxonomy-field">
  <option value="12">Cooking Wine</option>
  <option value="16">&nbsp;&nbsp;&nbsp;Red Wine</option>
  <option value="17">&nbsp;&nbsp;&nbsp;White Wine</option>
  <option value="11">Milk</option>
  <option value="20">&nbsp;&nbsp;&nbsp;Full Fat</option> 
  <option value="19">&nbsp;&nbsp;&nbsp;Fully Skimmed</option>
  <option value="18">&nbsp;&nbsp;&nbsp;Semi Skimmed</option>
  <option value="9">Oils</option>
  <option value="21">&nbsp;&nbsp;&nbsp;Olive</option>
  <option value="23">&nbsp;&nbsp;&nbsp;Rapeseed</option>
  <option value="22">&nbsp;&nbsp;&nbsp;Sunflower</option>
  <option value="8">Sauces</option>
  <option value="14">&nbsp;&nbsp;&nbsp;Cheese Sauces</option>
  <option value="15">&nbsp;&nbsp;&nbsp;Pasta Bakes</option>
  <option value="13">&nbsp;&nbsp;&nbsp;Tomato Sauces</option>
  <option value="10">Tinned</option>
  <option value="24">&nbsp;&nbsp;&nbsp;Beans</option>
</select>

I’m wondering how I can make it so the Sub-Categories in this dropdown box are NOT clickable. I only want the user to be able to put a product under a “Sub-Sub category”.

I’m struggling on how I am to differentiate the two levels (The only thing I can think of is a JQuery IF statement that says if the dropdown box option doesn’t have “&nbsp” in then make it so the user cannot select.

My understanding of JQuery isn’t advanced enough (as far as I know JQuery is the most obvious way of achieving what I want) to do this. Id appreciate any help as I’m a bit stuck at this point and I don’t want users grouping products in the incorrect areas.

[EDIT]
Script to load JQuery in functions.php: 

<?php
add_action('admin_enqueue_scripts','load_dropdown_script');
function load_dropdown_script( $hook ){
    wp_enqueue_script( 
        'dropdown', //unique handle
        get_template_directory_uri().'/js/dropdown.js', //location
        array('jquery')  //dependencies
     );
}
?>

Jquery: 

http://jsfiddle.net/Pp7Ey/

Chrome Error: 

Uncaught SyntaxError: Unexpected token ILLEGAL
​     <--this

Tried this to get rid to no avail: 

http://jsfiddle.net/djfdc/

-Thanks, Matt.

Post Views: 0

Related posts

Leave a Reply

1 comment

  1. I think, you don’t need to use jQuery here. In html there is “optgroup” tag – http://www.w3schools.com/tags/tag_optgroup.asp

    So, if you are getting dropdown list through wp_dropdown_categories function, you can do somthing like this:

    $select = wp_dropdown_categories('hide_empty=0&hierarchical=1&echo=0'); 
$select = preg_replace("#<option class="level-[01]"([^>]*)>(.*)</option>#", "<optgroup label="$2"></optgroup>", $select);
echo $select;

    WordPress adds class “level-1″/”level-2” and so on, you can change it in regular expression.

    update. If you want to use jQuery, you can do it in this way:

    $('select.taxonomy-field option').each(function() {

   var optionText = $(this).html();

   //if there are 3 spaces (&nbsp;), then it is our product. 
   //otherwise replace option tag with optgroup
   var m = optionText.match(/(&nbsp;){3}(.*)/g);

   if (!m)
       $(this).replaceWith('<optgroup label="'+optionText+'"></optgroup>');

});​

    http://jsfiddle.net/Pp7Ey/