Question

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

    <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>

Answer 1

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

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

Answer 2

如果我在这里正确猜到了你需要的代码是你需要的代码：http://jsfiddle.net/uJABa/5/你需要调整一下，让插入函数成功执行，但我想你可以从代码中得到这个想法。

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() {}

使用带有case / switch语句的下拉选项时，Javascript / HTML“错误”：“请使用POST请求”

2 个答案: