如何使用 Javascript/Jquery 检测 HTML 表单中的控件是否为 ComboBox

如何解决如何使用 Javascript/Jquery 检测 HTML 表单中的控件是否为 ComboBox

我试图检测网页中的 HTML 表单是否包含 ComboBox 或 List。 .我可以检测到所有其余的，这是我迄今为止的努力。如您所见，未检测到 ComboBox。我知道它不是输入控件。有没有其他方法可以做到这一点？

我的示例代码：

<html>
<head>
<script language="javascript" type="text/javascript">
function detectTypes() {
  var str = document.getElementById("Select1").value;
  var inputs = document.querySelectorAll('input');
    var inputtype = document.getElementsByTagName ("input");
      for(i =0; i < inputs.length; i++)
      {
    //Output result to console
    console.log("The " + i + ". input type = " + inputs[i].type);
    //Output result to multiline textBox
    var s = inputs[i].type;
        document.getElementById('output').value += s.substring(s.length - 10) + '\n';
      }
}
</script>
</head>
<body>
<form name="form1" id="form1" method="">
  <p>
  <label>TextBox </label>
    <input type="text" id="Name">
  </p>
  <p>
  <label>Password</label>
   <input type="password" id=phone>
  </p>
<p>
    <label>Dropdown ComoBox</label>
    <select name="Options" id="Select1">
      <option value="Jack,12345">Jack</option>
      <option value="John,45678">John</option>
      <option value="Tom,98765">Tom</option>
    </select>
  </p>
  <P>
  <label>CheckBox</label>
<input type="checkBox" id="check1">

<p>
<label>Radio Button</label>
<input type="radio" id="Option1" name="Option1" value="">

<p>
<label>Color Box</label>
<input type="color" name="ColorCode" id="color-picker">

</form>
<a href="#" onClick="detectTypes();">Click to List types of controls</a>
<p>
<label>RESULT:</label>
 <textarea name="output" id="output" rows="7" cols="30"></textarea>
 </p>
</body>
</html>

解决方法

我会称赞你的作品，因为它很有创意

我已经解决了你的问题

<html>
<body>
<form name="form1" id="form1" method="">
  <p>
  <label>TextBox </label>
    <input type="text" id="Name">
  </p>
  <p>
  <label >Password</label>
   <input type="password" id="phone">
  </p>
<p>
    <label>Dropdown Comobox</label>
    <select name="Options" id="Select1">
      <option value="Jack,12345">Jack</option>
      <option value="John,45678">John</option>
      <option value="Tom,98765">Tom</option>
    </select>
    <input type="hidden">
  </p>
  <P>
  <label>CheckBox</label>
<input type="checkbox" id="check1">

<p>
<label>Radio Button</label>
<input type="radio" id="Option1" name="Option1" value="">

<p>
<label>Color Box</label>
<input type="color" name="ColorCode" id="color-picker">

</form>
<a href="#" onClick="detectTypes();">Click to List types of controls</a>
<p>
<label>RESULT:</label>
 <textarea name="output" id="output" rows="7" cols="30"></textarea>
 </p>
</body>
</html>

/*
//* user script
function detectTypes() {
  //var str = document.getElementById("Select1").value;
  var inputs = document.querySelectorAll('input');
      var inputtype = document.getElementsByTagName("input");
      for(i =0; i < inputs.length; i++)
      {
    //Output result to console
    //console.log("The " + i + ". input type = " + inputs[i].type);
    //Output result to multiline textbox
    var s = inputs[i].type;
    document.getElementById('output').value += s.substring(s.length - 10) + '\n'  ;
      }
} */
function detectTypes(){
    // const inputtype = { "'SELECT'" : 'Dropdown','OPTION' : 'Combo Box'} // I wish,it would work as alert(inputtype.SELECT) will show deopdown
    var inputs = document.querySelectorAll("input,select");
    var s = "hi";
    for(i=0;i<=inputs.length;i++){
        var tagnames = inputs[i].tagName;
        if(tagnames == "INPUT"){
            document.getElementById('output').value += inputs[i].type + '\n';
        }else{
            document.getElementById('output').value += tagnames.toLowerCase() + '\n';
        }
    }
}
setTimeout(detectTypes,1);

如果您联系我，我会很高兴。我必须进一步讨论这个问题。联系我libertmahin@gmail.com