两个书卷之间的HTML选择脚本 [英] HTML Selection script between two droplists

问题描述

 < select name =List1id =List1的onclick = GETVAL（） > 
< option value =1selected =selected> Mercurio< / option> 
< option value =2> Venus< / option> 
< option value =3> Tierra< / option> 
< option value =4> Marte< / option> 
< / select> 
 
< select name =List2id =List2> 
< option value =1selected =selected> Hg< / option> 
< option value =2> Ve< / option> 
< option value =3> Ti< / option> 
< option value =4> Ma< / option> 
< / select> 
  

我已经编写了一个脚本，例如从List2中选择一个元素，依赖于相应的List1的元素

 < script language =javascripttype =text / javascript> 
 //<！CDATA [
 function GetVal（）{
 var LSelect1 = document.getElementById（'List1'）; 
 var LSelect2 = document.getElementById（'List2'）; 
开关（LSelect1.selectedIndex）
 {
案例1：
 LSelect2.selectedIndex = 1; 
 break; 
案例2：
 LSelect2.selectedIndex = 2; 
 break; 
案例3：
 LSelect2.selectedIndex = 3; 
 break; 
 default：
 LSelect2.selectedIndex = 4; 
} 
} 
 //]]> 
< / script> 
  

但是，该功能对于List1的第一个元素是错误的。为什么？

解决方案

selectedIndex 是基于0的。一个更简单的做事方式可能就是这样：

 < script language =javascripttype =text / javascript > 
 //<！CDATA [
 function GetVal（）{
 var LSelect1 = document.getElementById（'List1'）; 
 var LSelect2 = document.getElementById（'List2'）; 
 
 LSelect2.selectedIndex = LSelect1.selectedIndex; 
} 
 //]]> 
< / script> 
  

I have two droplist in html built using tag.

<select name="List1" id="List1" onclick="GetVal()">
<option value="1" selected="selected">Mercurio</option>
<option value="2">Venus</option>
<option value="3">Tierra</option>
<option value="4">Marte</option>
</select>

<select name="List2" id="List2">
<option value="1" selected="selected">Hg</option>
<option value="2">Ve</option>
<option value="3">Ti</option>
<option value="4">Ma</option>
</select>

I have written a script such as the selection of an element from List2 relies on the selection of the corresponding element of List1.

    <script language="javascript" type="text/javascript">
// <!CDATA[
function GetVal() {
var LSelect1 = document.getElementById('List1');
var LSelect2 = document.getElementById('List2');
switch (LSelect1.selectedIndex)
{
case 1:
  LSelect2.selectedIndex = 1;
  break;
case 2:
  LSelect2.selectedIndex = 2;
  break;
case 3:
  LSelect2.selectedIndex = 3;
  break;
default:
  LSelect2.selectedIndex = 4;
}
}
// ]]>
</script>

However, the function works wrongly for the first element of the List1. Why?

解决方案

selectedIndex is 0-based. A simpler way to do things might be like this:

<script language="javascript" type="text/javascript">
// <!CDATA[
function GetVal() {
    var LSelect1 = document.getElementById('List1');
    var LSelect2 = document.getElementById('List2');

    LSelect2.selectedIndex = LSelect1.selectedIndex;
}
// ]]>
</script>

这篇关于两个书卷之间的HTML选择脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！