javascript - "Class"属性不起作用

Question

我正在创建一个带有下拉列表的搜索字段，其中包含我要查找的数据，输入类型取决于我要搜索的内容。如果我按“姓名”或“身份证号码”搜索，输入类型为文本。如果我按“就业日期”、“TOR 日期”或“到期日期”进行搜索，则输入类型为日期。

我使用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>