Question

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

我正在尝试复制其下方的另一个表单（使用英制测量），这会打开相同的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>

这可能是非常基本的，但如果有人可以看看会很有帮助。感谢

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

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

两种形式独立打开iFrame

2 个答案: