“类别”属性不起作用

Question

我正在使用一个包含下拉列表的搜索字段，其中包含我要查找的数据，输入类型取决于我要搜索的内容。 如果按“名称”或“ ID号”进行搜索，则输入类型为text 。 如果按“就业日期”，“ TOR日期”或“到期日期”进行搜索，则输入类型为date 。

我使用createAttribute和setAttributeNode将class属性设置为每个值，我还使用仅显示月份和年份的引导日期选择器（我已在文件夹中包含.js和.css文件）。 这是我的代码：

    <div class="form-group">
        <select class="form-control" name="search_by" id="search_by" onchange="changeForm()">   
            <option value="idnum">ID Number</option>
            <option value="name">Name</option>
            <option value="emp_date">Employment Date</option>
            <option value="amel_date">AMEL Expired Date</option>
            <option value="tor_date">TOR Expired Date</option>
        </select>
    </div>

    <div class="form-group input-append date" data-date-format="mm-yyyy">
        <input  type="text" class="form-control" placeholder="Search" id="search_keywd"/>
    </div>

    <script>
        function changeForm()
        {
            var form = document.getElementById("search_keywd");
            var x = document.getElementById("search_by").value;
            var att = document.createAttribute("class");
            if(x == "emp_date")
            {
                att.value = "form-control datepicker";
            }
            else if (x == "amel_date")
            {
                att.value = "form-control datepicker";
            }
            else if (x == "tor_date")
            {
                att.value = "form-control datepicker";
            }
            else if (x == "name")
            {
                att.value = "form-control";
            }
            else if (x == "idnum")
            {
                att.value = "form-control";
            }
            form.setAttributeNode(att);
            document.getElementById("demo").innerHTML = "Current Attribute: " + att.value;
        }
        $(document).ready(function (){
        $('.datepicker').datepicker({
          format: "mm/yyyy",
          viewMode: "months",
          minViewMode: "months"
        });
    });
    </script>
    <p id="demo"></p>

问题是日期选择器未显示，但是if逻辑工作正常。 有人知道如何解决吗？

Answer 1

您正在为document而不是input创建属性。

直接使用[classList][1]

 function changeForm()
    {
        var form = document.getElementById("search_keywd");
        var searchBy = document.getElementById("search_by");
        var x = searchBy.value;
        var classList = form.classList;
        form.className = "";
        switch( x ) //use switch instead
        {
            case "emp_date":
            case "amel_date":
            case "tor_date":
               classList.add( "datepicker" );
            case "name":
            case "idnum":
               classList.add( "form-control" );
               break;
            default:
               break;
        }

        //rest of the code
    }

演示

 $(document).ready(function() { $('.datepicker').datepicker({ format: "mm/yyyy", viewMode: "months", minViewMode: "months" }); }); function changeForm() { var form = document.getElementById("search_keywd"); var searchBy = document.getElementById("search_by"); var x = searchBy.value; form.className = ""; var classList = form.classList; switch (x) //use switch instead { case "emp_date": case "amel_date": case "tor_date": classList.add("datepicker"); case "name": case "idnum": classList.add("form-control"); break; default: break; } document.getElementById("demo").innerHTML = "Current Attribute: " + classList; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <select class="form-control" name="search_by" id="search_by" onchange="changeForm()"> <option value="idnum">ID Number</option> <option value="name">Name</option> <option value="emp_date">Employment Date</option> <option value="amel_date">AMEL Expired Date</option> <option value="tor_date">TOR Expired Date</option> </select> </div> <div class="form-group input-append date" data-date-format="mm-yyyy"> <input type="text" class="form-control" placeholder="Search" id="search_keywd" /> </div> <p id="demo"></p>