jquery - 使后端的 Wordpress 父级下拉菜单不可点击

Question

我使用自定义字段和 Wordpress 分类法在 wordpress 上为产品系统提取产品子类别和子类别。但是，我正在使用的下拉框拉入我的类别时遇到问题。

结构是这样的：

 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”是我的分类法，只是为了对产品进行分组 “2 Sub Category”是为了进一步对产品进行分组 “3 Sub-Sub Category”是实际的类别产品将被放入

为 CMS 上的下拉框呈现的 HTML 如下所示：

<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>

我想知道如何才能使此下拉框中的子类别不可点击。我只希望用户能够将产品放在“子子类别”下。

我正在努力区分这两个级别（我唯一能想到的是一个 JQuery IF 语句，它说如果下拉框选项没有“ ”，那么就让它让用户无法选择。

我对 JQuery 的理解还不够先进（据我所知，JQuery 是实现我想要的最明显的方式）来做到这一点。我很感激任何帮助，因为我在这一点上有点卡住了，我不希望用户在不正确的区域对产品进行分组。

[编辑] 在 functions.php 中加载 JQuery 的脚本：

<?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
     );
}
?>

查询：

http://jsfiddle.net/Pp7Ey/

铬错误：

Uncaught SyntaxError: Unexpected token ILLEGAL
​     <--this

试过这个摆脱无济于事：

http://jsfiddle.net/djfdc/

-谢谢，马特。

Answer 1

我认为，您不需要在这里使用 jQuery。在 html 中有“optgroup”标签 - http://www.w3schools.com/tags/tag_optgroup.asp

因此，如果您通过 wp_dropdown_categories 函数获取下拉列表，则可以执行以下操作：

$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 增加了 class "level-1"/"level-2" 等等，你可以在正则表达式中改变它。

更新。如果你想使用 jQuery，你可以这样做：

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

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

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

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

});​

http://jsfiddle.net/Pp7Ey/