Javascript wordpress上的dhtmlxCombo帮助编辑：我找到了问题的答案。回答如下_Javascript_Wordpress_Combobox_Dhtmlx

Javascript wordpress上的dhtmlxCombo帮助编辑：我找到了问题的答案。回答如下

javascript wordpress combobox

Javascript wordpress上的dhtmlxCombo帮助编辑：我找到了问题的答案。回答如下,javascript,wordpress,combobox,dhtmlx,Javascript,Wordpress,Combobox,Dhtmlx,我试图在我的wordpress安装上实现一个组合框，但由于某些原因，我无法让它工作这就是我到目前为止所做的：从下载整个套件的dhtmlx dhtmlx.com/docs/download.shtml -已将代码库、外观和源文件复制到my server example.com 在上添加了一个函数我孩子的function.php文件Theme X写了绝对链接供参考 add_action('wp_head','add_combobox_header'); function add_combob

我试图在我的wordpress安装上实现一个组合框，但由于某些原因，我无法让它工作

这就是我到目前为止所做的：

从下载整个套件的dhtmlx dhtmlx.com/docs/download.shtml -已将代码库、外观和源文件复制到my server example.com 在上添加了一个函数我孩子的function.php文件Theme X写了绝对链接供参考

add_action('wp_head','add_combobox_header');
function add_combobox_header() {
    echo'
    <script src="http://example.com/dhtmlx/codebase/dhtmlx.js"></script>
    <link rel="stylesheet" type="text/css" href="http://example.com/dhtmlx/skins/web/dhtmlx.css"/>
<script async>
        var myCombo, myCombo2;
        function doOnLoad() {
            myCombo = new dhtmlXCombo("combo_zone", "combo", 230);
            myCombo.load("http://example.com/dhtmlx/combo_group.php?mode=state");
            myCombo.enableFilteringMode(true);
            //
            myCombo2 = new dhtmlXCombo("combo_zone2", "combo2", 230);
            myCombo2.enableFilteringMode(true);
            myCombo2.disable();
            //
            myCombo.attachEvent("onChange", function(value){
                myCombo2.clearAll();
                myCombo2.setComboValue(null);
                myCombo2.setComboText("");
                if (value == null) {
                    myCombo2.disable();
                } else {
                    myCombo2.enable();
                    myCombo2.load("http://example.com/dhtmlx/region/region_country.xml");
                }
            });
        }
    </script>

';
}

4复制了一个原始内容模块上的以下代码，有数千个插件用于此。如果您觉得更合适，也可以直接将其添加到您的子主题中：

<div onload="doOnLoad();">
    <h3>Select state</h3>
    <div id="combo_zone" style="width:230px;"></div>
    <br>
    <h3>Select city</h3>
    <div id="combo_zone2" style="width:230px;"></div>
</div>

但我得到了这个结果：

除了combobox，我什么都可以看到，我不知道我做错了什么，我的错误日志上没有任何错误，或者在firefox或chrome中检查元素时也没有任何错误

我什么都试过了，但我总是得到同样的结果，所以在这一点上，我只能希望你们中的一些人给我指出正确的方向，或者至少告诉我我做错了什么，因为我已经没有想法了

附言：我还试着为它构建一个短代码，得到了同样的结果。

这只是我最后一次尝试的代码，它实际上是官方网站上示例的复制粘贴：

经过大量阅读和尝试，我成功地解决了这个问题！我想与社区分享我的解决方案

在我开始分析我的解决方案之前，我想告诉您，我使用的第一个代码是一个如何组合组合的示例代码，您可以在

让我们开始：

1我将标题添加到主题的标记中。为此，我使用ftp转到：root/wp content/themes/your theme，然后编辑functions.php文件添加此函数：

//-----ADD HEADERS FOR COMBOBOX ---------------
add_action('wp_head','add_combobox_header');
function add_combobox_header() {
    wp_enqueue_style('dhtmlx', 'http://facilecitta.it/dhtmlx/codebase/dhtmlxcombo_dhx_web.css');
    wp_enqueue_style('dhtmlx', 'http://facilecitta.it/dhtmlx/codebase/dhtmlx.css');
    wp_enqueue_script( 'dhtmlxjs', 'http://facilecitta.it/dhtmlx/codebase/dhtmlx.js','', '', true );
}

注: dhtmlxcombo_dhx_web.css只是组合框的一个外观，因此您可以将dhtmlx.css作为默认外观，也可以将dhtmlxcombo_dhx_web.css作为web应用程序的更好外观，我在这里添加这两个应用程序只是为了参考，您不需要两者都有

2然后我添加了原始代码的脚本，请参见标签前面的链接，这样就不会干扰站点的加载

//-----SCRIPT FOR COMBOBOX-----------------
add_action('wp_footer', 'combobox_js_code_after_body');
function combobox_js_code_after_body() { 
?>
<script>

  var myCombo, myCombo2;
  function doOnLoad() {
    myCombo = new dhtmlXCombo("combo_zone", "combo", 230);
    myCombo.load("http://your-site.com/dhtmlx/options.xml");
    myCombo.enableFilteringMode(true);
    //
    myCombo2 = new dhtmlXCombo("combo_zone2", "combo2", 230);
    myCombo2.enableFilteringMode(true);
    myCombo2.disable();
    //
    myCombo.attachEvent("onChange", function(value){
      myCombo2.clearAll();
      myCombo2.setComboValue(null);
      myCombo2.setComboText("");
      if (value == null) {
        myCombo2.disable();
      } else {
        myCombo2.enable();
        myCombo2.load("http://your-site.com/dhtmlx/options2.xml");
      }
    });
  }
</script>
<?php 
}

3我现在想将onload属性添加到我的主题的body标记中，因此我转到主题的目录，在我的例子中编辑header.php并更改了以下代码：

<body <?php body_class(); ?>>

为此：

<body <?php body_class(); ?> onload="doOnLoad();">

然后在我的主题的原始内容模块中添加了剩余的代码：

<h3>Select state</h3>
    <div class="combo_info">California for example</div>
    <div id="combo_zone" style="width:230px;"></div>
    <br>
    <h3>Select city</h3>
    <div id="combo_zone2" style="width:230px;"></div>

瞧！现在我的站点中有一个很好的组合框=D

注：我要感谢themeco的同事们，他们给了我有用的信息，帮助我找到了解决问题的正确方法

您确定标头加载正确吗？你检查了Chrome上的开发控制台了吗？是的，我已经验证了，并且正确加载了头文件。控制台没有给我任何错误，在错误日志上也没有任何错误。当使用chrome控制台检查站点时，标题会正常显示，我注意到的一点是，由于我在标题中添加了doOnLoad函数，该站点实际上速度较慢。也许这是某种东西不能正常工作的线索？起初我以为我可能是皮肤，但现在我相信问题在于加载json、php文件或xml，这些文件中包含所有选项，由于某种原因我无法读取它们，从而使其自身失效。但我在代码中没有发现任何错误：/建议您在dhx论坛中打开主题：是的，我的坏呵呵。然而，我设法解决了这个问题。我不得不使用另一种方法，我会在稍后公布答案。无论如何，谢谢你的帮助！！

<body <?php body_class(); ?> onload="doOnLoad();">

<h3>Select state</h3>
    <div class="combo_info">California for example</div>
    <div id="combo_zone" style="width:230px;"></div>
    <br>
    <h3>Select city</h3>
    <div id="combo_zone2" style="width:230px;"></div>