【问题标题】:Select (dropdown) with jcf plugin使用 jcf 插件选择(下拉菜单)
【发布时间】:2020-05-04 22:50:38
【问题描述】:

我有一个国家和州下拉菜单。我们的 UI 设计师使用了 jcf 插件,它隐藏了真正的选择框并转换成一个看起来和行为都像下拉菜单的控件。当我不必从客户端动态填充这些选择框时,它工作得很好。

我有一个国家/地区下拉菜单,根据所选列表,我的州下拉菜单应填充。使用 jcf,我可以看到填充了真正的下拉列表(位于左侧 -9999px),但只有第一个选项出现在替换它的控件中。有谁知道如何显示/填充修改后的控件。

谢谢,

【问题讨论】:

    标签: html css


    【解决方案1】:

    编辑:这似乎在我更改后重建了选择。

    $('#myselectbox')[0].jcf.buildDropdown(); // Rebuild based on options
    $('#myselectbox')[0].jcf.refreshState(); // Updates to current selected 
    

    我有完全相同的问题,并且正在从源头获取答案。

    这个 jcf.customForms “插件”似乎没有很多文档。您可能使用过相同的服务 (psdtohtml) 或类似的公司将您的设计分割成 HTML。这似乎是一些与该服务相关的自定义 javascript。

    通过查看源代码或使用console.debug(jcf.customForms); 可以找到很多内容,但我还没有找到解决方案。等我弄明白了再更新。

    我尝试了很多类似的东西

    //jcf.customForms.setOptions(states[0]);
    //jcf.customForms.refreshAll();
    //jcf.customForms.refreshElement(states[0]);
    //states.refreshState();
    

    至于上一个答案,当您只想重新加载选择时必须initTabs(); 似乎很奇怪。

    【讨论】:

    • 它也对我有用! destroyAll() 和 refreshAll() 也对我有用。 (jcf.customForms.destroyAll(); jcf.customForms.replaceAll();)
    • 很高兴。我一直很想弄清楚这个框架。我更喜欢直接选择元素(document.getElementById('myselectbox').jcf),但知道这一点可以挽救生命。
    • 为我工作也感谢 Daniel 确实 destroyAll 和 replaceAll 没有使元素在 iPad 上消失?
    【解决方案2】:

    这是对我有用的代码。 代码设置了select 字段值,然后设置refresh 并使用jcf 更改值,select 字段将使用值为 42 的选项进行选择

    jQuery("#select-element").val("42");
    
    jcf.getInstance(jQuery("#select-element")).refresh()
    

    【讨论】:

      【解决方案3】:

      填充状态时需要再次定义以下函数:

      jcf.customForms.replaceAll();
      initSlideShow();
      initInputs();
      initSameHeight();
      initTabs();
      fixSelect();initCounter();
      initOpenClose();
      

      【讨论】:

        【解决方案4】:

        我只需要一条线。及其通用解决方案。

        $(document).ajaxComplete(function() {
          jcf.customForms.replaceAll();
        });
        

        干杯!!!

        【讨论】:

          【解决方案5】:

          您只需在选择框值发生变化时调用刷新方法

          jcf.getInstance($("#select-box")).refresh()
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2017-06-12
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2020-10-16
            相关资源
            最近更新 更多