需要帮助将2个JQuery Form Plugin的功能整合在一起

时间:2010-11-01 18:59:15

标签: jquery jquery-plugins jquery-selectors

让我先说一下,我不是程序员。所以请耐心等待......对于编程大师来说,我的调查可能听起来有些“呃”。无论如何,我试图将两个JQuery脚本的功能结合在一起。一个脚本隐藏表单的一部分(在div中),直到用户从下拉列表中选择他们想要的类别。当用户选择某些内容时,与该选择相关联的div显示自己。另一个脚本允许用户再次添加/删除(或换句话说克隆)表单的同一部分。同时,我希望克隆初始下拉列表,允许用户再次选择另一个或同一类别,并添加/删除与他们选择的类别相关联的表单。

它有点像一个有3个产品类别的商店。客户进来并希望在一次查询中获得来自1个或所有3个产品类别的各种产品可能性的报价。

例如,用户从初始下拉菜单“category_1”中进行选择。与类别1关联的表单片段显示并且用户填写它。用户“添加”另一个产品,克隆相同的表单片段,再次填写。在所有这些之下,初始下拉列表也会被克隆,他们可以从“category_2”中选择。与类别2关联的表单片段显示,用户可以填写并“添加”另一个类别2产品表单摘录,就像他们对类别1所做的那样。

我希望这是有道理的。无论如何,脚本自己工作正常。当我一起使用它时,它就是我遇到问题的地方。

这是我正在使用的第一个脚本。

<script type="text/javascript">
    $(document).ready(function(){
    $('#category_1').hide();
    $('#category_2').hide();
    $('#category_3').hide();
    $("#thechoices").change(function(){
    if(this.value == 'all')
    {$("#boxes").children().show();}
    else
    {$("#" + this.value).show().siblings().hide();}
    });

    $("#thechoices").change();
    });
</script>

这是第二个脚本。我从这里得到了它:http://vipullimbachiya.com/?p=209。它使用单独的.js文件。下面的脚本激活它。

<script type="text/javascript">
    $(document).ready(function () {
    $(".clone_another").EnableMultiField({
        linkText: "Add Item +",
        removeLinkText: "Remove Item -",
        confirmOnRemove: false,
        });
    });
</script>

这是我的基本标记。

<form>
   <div class="clone_another">
       <select id="thechoices">
           <option value="category_1">Category 1</option>
           <option value="category_2">Category 2</option>
           <option value="category_3">Category 3</option>
       </select>
       <div id="boxes">
           <div id="category_1">
           <p>Box 1 stuff...</p>
           </div>
           <div id="category_2">
           <p>Box 2 stuff...</p>
           </div>
           <div id="category_3">
           <p>Box 3 stuff...</p>
           </div>
       </div> 
   </div>
</form>

问题是第一个脚本有效。它根据初始下拉列表中选择的内容隐藏和取消隐藏表单片段。无法正常工作的是克隆表单片段和初始下拉列表的功能,以便用户可以对另一个产品进行另一次查询。我知道我在这里缺少一些大事,但我知识不足以知道在哪里寻找或如何去解决它。我非常感谢能够就这个问题向我提出任何见解。

1 个答案:

答案 0 :(得分:0)

如果有帮助,我实际使用这个东西的形式就在这里: www.pentco.com/form.php。

感谢。