Javascript jQuery插件剪切我的输入并将其设置在表单之外

我正在jsp页面上的表单中使用jqx下拉按钮来显示一些元素

当我将它们设置为以下值时

<form name="myForm">

    <input type="button" value="one" onclick="validate(this.form);">

        <div style="float: left;" id="dropDownButton">
              <div style="border: none; display: none;" id='jqxTree'>
            <ul>
               <li>
              <input type="button" value="two" onclick="validate(this.form);">
               </li>
               <li>
               <input type="button" value="three" onclick="validate(this.form);">
               </li>
              </ul>
           </div>
        </div>

    <input type="button" value="four" onclick="validate(this.form);">

    </form>

这样做会以某种方式将dropDownButton div设置为表单之外，并且它显然会抛出错误，表示this.form未知

---

如何解决此问题，或者是否可以将外部元素分配回我的表单？

如果没有看到任何CSS，很难说为什么某些内容可能不对齐。但有一件事是可以肯定的，那就是您的输入标记的格式不正确。这些应该是自动关闭的

-结束

/>

是键，因此它们不会寻找结束标记

我还建议不要使用inline

onclick

属性来调用validate函数。这一切都可以通过一个简单的JS函数来完成。下面是我建议的修订：

这是清理后的HTML

<form name="myForm" id="myForm">

    <input type="button" value="one"/>

    <div style="float: left;" id="dropDownButton">
        <div id='jqxTree'>
            <ul>
                <li>
                    <input type="button" value="two"/>
                </li>
                <li>
                    <input type="button" value="three"/>
                </li>
            </ul>
        </div>
    </div>

    <input type="button" value="four"/>

</form>

<form name="myForm" id="myForm">

    <input type="button" value="one"/>

    <div style="float: left;" id="dropDownButton">
        <div id='jqxTree'>
            <ul>
                <li>
                    <input type="button" value="two"/>
                </li>
                <li>
                    <input type="button" value="three"/>
                </li>
            </ul>
        </div>
    </div>

    <input type="button" value="four"/>

</form>

$(function(){
    //Hide the dropdown with JS, then call the plugin
    $("#dropDownButton")
        .hide()
        .jqxDropDownButton({
            width: 90,
            height: 22,
            theme: theme
        });

    //Save the form to a variable so we only have to select it once
    var $theForm = $("#myForm");

    //Find all the buttons inside the form, then attach a click event
    $theForm
        .find("input[type='button']")
        .on("click",function(){
            //Pass the form into the validate function when a button is clicked
            validate(theForm);
        });

});