两个窗体独立打开 iFrame答案

【问题标题】：Two forms opening iFrame independently两个窗体独立打开 iFrame
【发布时间】：2015-06-26 11:18:54
【问题描述】：

我有一个表单，用户按尺寸（公制）选择工具包，首先是长度，然后是宽度，它会在页面内的 iFrame 中打开正确的产品 URL。

我正在尝试在其下方复制另一个打开相同 iFrame 的表单（使用英制测量）。

要使第二个表单独立于第一个表单工作，我需要进行哪些更改？我将第二种形式命名为“kits2”，但第一种形式正在影响第二种形式。这是第一个独立工作的表单：

<form name="kits" class="txtblue20" id="kits">
           <select name="length" size="7" class="dropdown" style="width: 140px" onchange="updatewidth(this.selectedIndex)">
            <option selected="selected">Select Length</option>
            <option value="600">0-600mm</option>
            <option value="800">601-800mm</option>
            <option value="1000">801-1000mm</option>
            <option value="1200">1001-1200mm</option>
            <option value="2400">1201-2400mm</option>
            <option value="3050">2440-3050mm</option>
          </select>
          <select name="width" size="7" class="dropdown" style="width: 140px" onclick="window.open(this.options[this.options.selectedIndex].value,'myIFrame')">
          </select>
        </div>
      </div>
          </form>
            <script type="text/javascript">
 
var lengthlist=document.kits.length
var widthlist=document.kits.width

 
var width=new Array()
width[0]=""
width[1]=["Select Width|select-length-width.html", "0-600mm|600X600.html", "601-900mm|600X900.html", "901-1200mm|600x1200.html"]
width[2]=["Select Width|select-length-width.html", "0-600mm|800x600.html", "601-900mm|800x900.html", "901-1200mm|800x1200.html"]
width[3]=["Select Width|select-length-width.html", "0-600mm|1000X600.html", "601-900mm|1000X900.html", "901-1200mm|1000X1200.html"]
width[4]=["Select Width|select-length-width.html", "0-600mm|1200x600.html", "601-900mm|1200X900.html", "901-1200mm|1200X1200.html", "1201-1800mm|1200X1800.html", "1801-2400mm|1200X2400.html"]
width[5]=["Select Width|select-length-width.html", "0-600mm|2400X600.html", "601-900mm|2400x900.html", "901-1200mm|2400X1200.html"]
width[6]=["Select Width|select-length-width.html", "1200mm|3050x1200.html", "1500mm|3050x1500.html"] 

function updatewidth(selectedwidthgroup){
    widthlist.options.length=0
    if (selectedwidthgroup>0){
        for (i=0; i<width[selectedwidthgroup].length; i++)
            widthlist.options[widthlist.options.length]=new Option(width[selectedwidthgroup][i].split("|")[0], width[selectedwidthgroup][i].split("|")[1])
    }
}
        </script>

当我复制下面的代码以进行英制测量时，这两种形式会相互影响。

这是我的代码，上面有两种形式：

<form name="kits" class="txtblue20" id="kits">
           <select name="length" size="7" class="dropdown" style="width: 140px" onchange="updatewidth(this.selectedIndex)">
            <option selected="selected">Select Length</option>
            <option value="600">0-600mm</option>
            <option value="800">601-800mm</option>
            <option value="1000">801-1000mm</option>
            <option value="1200">1001-1200mm</option>
            <option value="2400">1201-2400mm</option>
            <option value="3050">2440-3050mm</option>
          </select>
          <select name="width" size="7" class="dropdown" style="width: 140px" onclick="window.open(this.options[this.options.selectedIndex].value,'myIFrame')">
          </select>
        </div>
      </div>
          </form>
            <script type="text/javascript">
var lengthlist=document.kits.length
var widthlist=document.kits.width
 
var width=new Array()
width[0]=""
width[1]=["Select Width|select-length-width.html", "0-600mm|600X600.html", "601-900mm|600X900.html", "901-1200mm|600x1200.html"]
width[2]=["Select Width|select-length-width.html", "0-600mm|800x600.html", "601-900mm|800x900.html", "901-1200mm|800x1200.html"]
width[3]=["Select Width|select-length-width.html", "0-600mm|1000X600.html", "601-900mm|1000X900.html", "901-1200mm|1000X1200.html"]
width[4]=["Select Width|select-length-width.html", "0-600mm|1200x600.html", "601-900mm|1200X900.html", "901-1200mm|1200X1200.html", "1201-1800mm|1200X1800.html", "1801-2400mm|1200X2400.html"]
width[5]=["Select Width|select-length-width.html", "0-600mm|2400X600.html", "601-900mm|2400x900.html", "901-1200mm|2400X1200.html"]
width[6]=["Select Width|select-length-width.html", "1200mm|3050x1200.html", "1500mm|3050x1500.html"] 

function updatewidth(selectedwidthgroup){
    widthlist.options.length=0
    if (selectedwidthgroup>0){
        for (i=0; i<width[selectedwidthgroup].length; i++)
            widthlist.options[widthlist.options.length]=new Option(width[selectedwidthgroup][i].split("|")[0], width[selectedwidthgroup][i].split("|")[1])
    }
}
     </script>
<br>

<form name="kits2" class="txtblue20" id="kits2">
           <div id="CollapsiblePanel1" class="CollapsiblePanel">
                </div>
        <div class="CollapsiblePanelContent">
          <select name="length" size="7" class="dropdown" style="width: 140px" onchange="updatewidth(this.selectedIndex)">
            <option selected="selected">Select Length</option>
                 <option value="2'">0 - 2'</option>
                 <option value="2'8">2'1" - 2'8"</option>
                 <option value="3'4">2'9" - 3'4"</option>
                 <option value="4'">3'5" - 4'</option>
                 <option value="8'">4'1" - 8'</option>
                 <option value="10'">8'1" - 10'</option>
               </select>
          <select name="width" size="7" class="dropdown" style="width: 140px" onclick="window.open(this.options[this.options.selectedIndex].value,'myIFrame')">
          </select>
        </div>
      </div>
          </form>
            <script type="text/javascript">
 
var lengthlist=document.kits2.length
var widthlist=document.kits2.width

var width=new Array()
width[0]=""
width[1]=["Select Width|select-length-width.html", "0' - 2'|600X600.html", "2'1 - 2'8|600X900.html", "2'9 - 3'4|600x1200.html"]
width[2]=["Select Width|select-length-width.html", "0' - 2'|800x600.html", "2'1 - 2'8|800x900.html", "2'9 - 3'4|800x1200.html"]
width[3]=["Select Width|select-length-width.html", "0' - 2'|1000X600.html", "2'1 - 2'8|1000X900.html", "2'9 - 3'4|1000X1200.html"]
width[4]=["Select Width|select-length-width.html", "0' - 2'|1200x600.html", "2'1 - 2'8|1200X900.html", "2'9 - 3'4|1200X1200.html", "4' - 6'|1200X1800.html", "6' - 8'|1200X2400.html"]
width[5]=["Select Width|select-length-width.html", "0' - 2'|2400X600.html", "2'1 - 2'8|2400x900.html", "2'9 - 3'4|2400X1200.html"]
width[6]=["Select Width|select-length-width.html", "0' - 4'|3050x1200.html", "0' - 5'|3050x1500.html"] 

function updatewidth(selectedwidthgroup){
    widthlist.options.length=0
    if (selectedwidthgroup>0){
        for (i=0; i<width[selectedwidthgroup].length; i++)
            widthlist.options[widthlist.options.length]=new Option(width[selectedwidthgroup][i].split("|")[0], width[selectedwidthgroup][i].split("|")[1])
    }
}
        </script>

这可能是非常基本的，但如果有人可以看一下，这将是一个很大的帮助。谢谢

【问题讨论】：

javascript 变量/函数必须是唯一的。

标签： javascript html forms iframe

【解决方案1】：

这应该可行。您正在使用指向第一个表单属性的变量

<html>
<body>
<form name="kits" class="txtblue20" id="kits">
           <select name="length" size="7" class="dropdown" style="width: 140px" onchange="updatewidth(this.selectedIndex)">
            <option selected="selected">Select Length</option>
            <option value="600">0-600mm</option>
            <option value="800">601-800mm</option>
            <option value="1000">801-1000mm</option>
            <option value="1200">1001-1200mm</option>
            <option value="2400">1201-2400mm</option>
            <option value="3050">2440-3050mm</option>
          </select>
          <select name="width" size="7" class="dropdown" style="width: 140px" onclick="window.open(this.options[this.options.selectedIndex].value,'myIFrame')">
          </select>
        </div>
      </div>
          </form>
            <script type="text/javascript">
var lengthlist=document.kits.length
var widthlist=document.kits.width

var width=new Array()
width[0]=""
width[1]=["Select Width|select-length-width.html", "0-600mm|600X600.html", "601-900mm|600X900.html", "901-1200mm|600x1200.html"]
width[2]=["Select Width|select-length-width.html", "0-600mm|800x600.html", "601-900mm|800x900.html", "901-1200mm|800x1200.html"]
width[3]=["Select Width|select-length-width.html", "0-600mm|1000X600.html", "601-900mm|1000X900.html", "901-1200mm|1000X1200.html"]
width[4]=["Select Width|select-length-width.html", "0-600mm|1200x600.html", "601-900mm|1200X900.html", "901-1200mm|1200X1200.html", "1201-1800mm|1200X1800.html", "1801-2400mm|1200X2400.html"]
width[5]=["Select Width|select-length-width.html", "0-600mm|2400X600.html", "601-900mm|2400x900.html", "901-1200mm|2400X1200.html"]
width[6]=["Select Width|select-length-width.html", "1200mm|3050x1200.html", "1500mm|3050x1500.html"] 

function updatewidth(selectedwidthgroup){
    widthlist.options.length=0
    if (selectedwidthgroup>0){
        for (i=0; i<width[selectedwidthgroup].length; i++)
            widthlist.options[widthlist.options.length]=new Option(width[selectedwidthgroup][i].split("|")[0], width[selectedwidthgroup][i].split("|")[1])
    }
}
     </script>
<br>

<form name="kits2" class="txtblue20" id="kits2">
           <div id="CollapsiblePanel1" class="CollapsiblePanel">
                </div>
        <div class="CollapsiblePanelContent">
          <select name="length" size="7" class="dropdown" style="width: 140px" onchange="updatewidth1(this.selectedIndex)">
            <option selected="selected">Select Length</option>
                 <option value="2'">0 - 2'</option>
                 <option value="2'8">2'1" - 2'8"</option>
                 <option value="3'4">2'9" - 3'4"</option>
                 <option value="4'">3'5" - 4'</option>
                 <option value="8'">4'1" - 8'</option>
                 <option value="10'">8'1" - 10'</option>
               </select>
          <select name="width1" size="7" class="dropdown" style="width: 140px" onclick="window.open(this.options[this.options.selectedIndex].value,'myIFrame')">
          </select>
        </div>
      </div>
          </form>
            <script type="text/javascript">

var lengthlist1=document.kits2.length
var widthlist1=document.kits2.width1

var width1=new Array()
width1[0]=""
width1[1]=["Select Width|select-length-width.html", "0' - 2'|600X600.html", "2'1 - 2'8|600X900.html", "2'9 - 3'4|600x1200.html"]
width1[2]=["Select Width|select-length-width.html", "0' - 2'|800x600.html", "2'1 - 2'8|800x900.html", "2'9 - 3'4|800x1200.html"]
width1[3]=["Select Width|select-length-width.html", "0' - 2'|1000X600.html", "2'1 - 2'8|1000X900.html", "2'9 - 3'4|1000X1200.html"]
width1[4]=["Select Width|select-length-width.html", "0' - 2'|1200x600.html", "2'1 - 2'8|1200X900.html", "2'9 - 3'4|1200X1200.html", "4' - 6'|1200X1800.html", "6' - 8'|1200X2400.html"]
width1[5]=["Select Width|select-length-width.html", "0' - 2'|2400X600.html", "2'1 - 2'8|2400x900.html", "2'9 - 3'4|2400X1200.html"]
width1[6]=["Select Width|select-length-width.html", "0' - 4'|3050x1200.html", "0' - 5'|3050x1500.html"] 

function updatewidth1(selectedwidthgroup){
    widthlist1.options.length=0
    if (selectedwidthgroup>0){
        for (i=0; i<width1[selectedwidthgroup].length; i++)
            widthlist1.options[widthlist1.options.length]=new Option(width1[selectedwidthgroup][i].split("|")[0], width1[selectedwidthgroup][i].split("|")[1])
    }
}
        </script>
</body>
</html>

【讨论】：

非常感谢，这正是我想要的。我一直在尝试将 1 添加到宽度等。这是一个很好的例子。再次感谢

【解决方案2】：

对于另一种形式，您需要不同的变量名称和不同的功能。我在第二种形式的每个变量的末尾添加了“2”，它可以工作。

<form name="kits" class="txtblue20" id="kits">
           <select name="length" size="7" class="dropdown" style="width: 140px" onchange="updatewidth(this.selectedIndex)">
            <option selected="selected">Select Length</option>
            <option value="600">0-600mm</option>
            <option value="800">601-800mm</option>
            <option value="1000">801-1000mm</option>
            <option value="1200">1001-1200mm</option>
            <option value="2400">1201-2400mm</option>
            <option value="3050">2440-3050mm</option>
          </select>
          <select name="width" size="7" class="dropdown" style="width: 140px" onclick="window.open(this.options[this.options.selectedIndex].value,'myIFrame')">
          </select>
        </div>
      </div>
          </form>
            <script type="text/javascript">
var lengthlist=document.kits.length
var widthlist=document.kits.width
 
var width=new Array()
width[0]=""
width[1]=["Select Width|select-length-width.html", "0-600mm|600X600.html", "601-900mm|600X900.html", "901-1200mm|600x1200.html"]
width[2]=["Select Width|select-length-width.html", "0-600mm|800x600.html", "601-900mm|800x900.html", "901-1200mm|800x1200.html"]
width[3]=["Select Width|select-length-width.html", "0-600mm|1000X600.html", "601-900mm|1000X900.html", "901-1200mm|1000X1200.html"]
width[4]=["Select Width|select-length-width.html", "0-600mm|1200x600.html", "601-900mm|1200X900.html", "901-1200mm|1200X1200.html", "1201-1800mm|1200X1800.html", "1801-2400mm|1200X2400.html"]
width[5]=["Select Width|select-length-width.html", "0-600mm|2400X600.html", "601-900mm|2400x900.html", "901-1200mm|2400X1200.html"]
width[6]=["Select Width|select-length-width.html", "1200mm|3050x1200.html", "1500mm|3050x1500.html"] 

function updatewidth(selectedwidthgroup){
    widthlist.options.length=0
    if (selectedwidthgroup>0){
        for (i=0; i<width[selectedwidthgroup].length; i++)
            widthlist.options[widthlist.options.length]=new Option(width[selectedwidthgroup][i].split("|")[0], width[selectedwidthgroup][i].split("|")[1])
    }
}
     </script>
<br>

<form name="kits2" class="txtblue20" id="kits2">
           <div id="CollapsiblePanel1" class="CollapsiblePanel">
                </div>
        <div class="CollapsiblePanelContent">
          <select name="length" size="7" class="dropdown" style="width: 140px" onchange="updatewidth2(this.selectedIndex)">
            <option selected="selected">Select Length</option>
                 <option value="2'">0 - 2'</option>
                 <option value="2'8">2'1" - 2'8"</option>
                 <option value="3'4">2'9" - 3'4"</option>
                 <option value="4'">3'5" - 4'</option>
                 <option value="8'">4'1" - 8'</option>
                 <option value="10'">8'1" - 10'</option>
               </select>
          <select name="width" size="7" class="dropdown" style="width: 140px" onclick="window.open(this.options[this.options.selectedIndex].value,'myIFrame')">
          </select>
        </div>
      </div>
          </form>
            <script type="text/javascript">
 
var lengthlist2=document.kits2.length
var widthlist2=document.kits2.width

var width2=new Array()
width2[0]=""
width2[1]=["Select Width|select-length-width.html", "0' - 2'|600X600.html", "2'1 - 2'8|600X900.html", "2'9 - 3'4|600x1200.html"]
width2[2]=["Select Width|select-length-width.html", "0' - 2'|800x600.html", "2'1 - 2'8|800x900.html", "2'9 - 3'4|800x1200.html"]
width2[3]=["Select Width|select-length-width.html", "0' - 2'|1000X600.html", "2'1 - 2'8|1000X900.html", "2'9 - 3'4|1000X1200.html"]
width2[4]=["Select Width|select-length-width.html", "0' - 2'|1200x600.html", "2'1 - 2'8|1200X900.html", "2'9 - 3'4|1200X1200.html", "4' - 6'|1200X1800.html", "6' - 8'|1200X2400.html"]
width2[5]=["Select Width|select-length-width.html", "0' - 2'|2400X600.html", "2'1 - 2'8|2400x900.html", "2'9 - 3'4|2400X1200.html"]
width2[6]=["Select Width|select-length-width.html", "0' - 4'|3050x1200.html", "0' - 5'|3050x1500.html"] 

function updatewidth2(selectedwidthgroup){
    widthlist2.options.length=0
    if (selectedwidthgroup>0){
        for (i=0; i<width2[selectedwidthgroup].length; i++)
            widthlist2.options[widthlist2.options.length]=new Option(width[selectedwidthgroup][i].split("|")[0], width[selectedwidthgroup][i].split("|")[1])
    }
}
        </script>

【讨论】：

也感谢您的帮助 marek :)