Javascript/HTML”;错误”:"请使用POST请求“;将下拉选择与case/switch语句一起使

Javascript/HTML "error": "Please use POST request" when using dropdown selection with case/switch statement

本文关键字：选择 case 语句 一起 switch 请求 错误 HTML quot Javascript POST      更新时间：2023-09-26

我有一个下拉列表，每个值都对应于一个case/switch语句，该语句将显示一个带有提交按钮的文本输入字段网格。然而，它似乎不起作用。请检查小提琴或下面的代码。

http://jsfiddle.net/7PEhv/3/

    <html>
    <body>
      <FORM NAME=frmOne>
      <select name='myfield' onchange='this.form.submit()'>
        <option value = 2>2x2</option>
        <option value = 3>3x3</option>
        <option value = 4>4x4</option>
        <option value = 5>5x5</option>
      </select>
      </form>
    <script type="text/javascript">
      size = document.frmOne.myfield.value
      switch (size)
      {
        case 2:
          <input type="integer" name="name1"/>
          <input type="integer" name="name2"/>
          <input type="integer" name="name3"/>
          <input type="integer" name="name4"/>
          <input type="button" Value="Add Into Array" 
          onclick="insert(this.form.name.value), insert2(this.form.name2.value);"/>
        break;
        case 3:
          <input type="integer" name="name1"/>
          <input type="integer" name="name2"/>
          <input type="integer" name="name3"/>
          <input type="integer" name="name4"/>
          <input type="integer" name="name5"/>
          <input type="integer" name="name6"/>
          <input type="integer" name="name7"/>
          <input type="integer" name="name8"/>
          <input type="integer" name="name9"/>
          <input type="button" Value="Add Into Array" 
          onclick="insert(this.form.name.value), insert2(this.form.name2.value);"/>
       break;
       case 4:
         <input type="integer" name="name1"/>
         <input type="integer" name="name2"/>
         <input type="integer" name="name3"/>
         <input type="integer" name="name4"/>
         <input type="integer" name="name5"/>
         <input type="integer" name="name6"/>
         <input type="integer" name="name7"/>
         <input type="integer" name="name8"/>
         <input type="integer" name="name9"/>
         <input type="integer" name="name10"/>
         <input type="integer" name="name11"/>
         <input type="integer" name="name12"/>
         <input type="integer" name="name13"/>
         <input type="integer" name="name14"/>
         <input type="integer" name="name15"/>
         <input type="integer" name="name16"/>
         <input type="button" Value="Add Into Array" 
         onclick="insert(this.form.name.value), insert2(this.form.name2.value);"/>
       break;
       default:
         document.write("Pick a selection");
       }
    </script>  
   </body>
 </html>​

您看到一个特定于JSFiddle的错误。当您更改下拉框的值时，表单会提交（正如您所告诉的），而此提交是触发JSFiddle错误的原因（您不能在JSFiddl上提交表单，因为没有服务器可以接收它们）。如果你想用drop的新值在JavaScript中做一些事情，你不应该告诉它在值更改时提交自己（或者你应该用JavaScript取消事件）。

此外，您编写的JavaScript无效，您在其中嵌入了HTML，这是不允许的（它需要在字符串中引用并使用DOM方法添加）。

如果我猜对了你需要什么，下面是你需要的代码：http://jsfiddle.net/uJABa/5/你需要对它进行一点调整，才能成功地执行insert函数，但我认为你可以从代码中得到这个想法。

function showBoxes(select)
{
   var selectedValue = $(select).find('option:selected').val();
      switch (selectedValue)
      {
        case "2":
          $("#grid").html('<input type="integer" name="name1"/><input type="integer" name="name2"/><input type="integer" name="name3"/><input type="integer" name="name4"/><input type="button" id="insertButton" Value="Add Into Array"/>');
          break;
        case "3":
          $("#grid").html('<input type="integer" name="name1"/><input type="integer" name="name2"/><input type="integer" name="name3"/><input type="integer" name="name4"/><input type="integer" name="name5"/><input type="integer" name="name6"/><input type="integer" name="name7"/><input type="integer" name="name8"/><input type="integer" name="name9"/><input id="insertButton" type="button" Value="Add Into Array"/>');
          break;
        default:
          console.log("Select valid value");
          break;
      }
   $("#insertButton").click(insert);
}
function insert() {}
相关文章：