2014-10-01 87 views
-1

我想根据另一个下拉列表的选择,从Jsp中动态选择Jsp上的值。 例如:我有两个drop down1-A,B和drop2的值为1到10. 因此,当我选择A时,我希望从下拉菜单中选择5个值来动态选择onclick事件。jsp中的JavaScript onclick事件

+0

尝试使用jQuery。 – 2014-10-01 07:25:24

+0

我知道如何从数据库检索,但发现通过javascript onclick事件调用函数来连接数据库的困难事件 – CodeHunt 2014-10-01 07:27:14

+0

使用ajax连接到将连接到数据库的servlet – 2014-10-01 07:28:49

回答

0

首先,这与JSP无关。这是客户端交互,你需要使用JavaScript来管理。

如果您使用<select>下拉菜单,则需要捕获第一个下拉菜单中的change事件 - 当下拉菜单的值发生变化时触发everythime。

为了使代码更易于阅读和避免交叉浏览器问题,您可以使用jQuery来处理这种情况。然而

jQuery("#dropdown1").change(function() { 

    var selectedValue = jQuery(this).val(); 

    // Now use to value to do other stufffs 

}); 

,如果您有对第二个这是不可能的选择多了“下拉菜单”:

因此,如果你有一个<select>元素与ID设置为说dropdown1你可以试试这个值。一个基本的选择是这个下拉转换成一个列表,并允许使用multiple="multiple"(参考文献:http://www.w3schools.com/tags/att_select_multiple.asp)多种选择

也就是说,你只需要使用<select multiple="multiple">

现在,我不知道您的要求和逻辑为第一个下拉菜单中的每个项目选取第二个下拉菜单中的哪些特定值。但是,你似乎需要在这里应用自己的逻辑。

然而,让我们考虑,对于值A' of dropdown1 the selected values in dropdown2 will be '1', '2' and '4'; for value B”在dropdown2 dropdown1选定的值将是‘2’,‘5’和‘6’,‘8’和‘10’可以使用这样的代码:

jQuery(document).ready(function() { 
    jQuery("#dropdown1").change(function() { 

     var selectedValue = jQuery(this).val(), 
      mappedValues = { 
       "A": {"1": true, "2": true, "4": true}, 
       "B": {"2": true, "5": true, "6": true, "8": true, "10": true} 
      }, 
      selectedMappedValues = mappedValues[selectedValue] || {}, 
      dropdown2 = jQuery("#dropdown2"), 
      dropdown2Options = dropdown2.find('option'), 
      dropdown2Option; 

     dropdown2Options.prop('selected', false); 
     dropdown2Options.each(function() { 
      dropdown2Option = jQuery(this); 
      if (selectedMappedValues[dropdown2Option.val()]) { 
       dropdown2Option.prop('selected', true); 
      } 
     });  

    }); 
}); 

活生生的例子:http://jsfiddle.net/sudipto/uzmbko17/

0

尝试。 这个jsp代码。

<select id="dropdown1" name="dropdown1" onchange="selectValue()"> 
    <option value="a">A</option> 
    <option value="b">B</option> 
</select> 
<select id="dropdown2" name="dropdown2"> 
    <option value="a1">1</option> 
    <option value="a2">2</option> 
    <option value="a3">3</option> 
    <option value="a4">4</option> 
    <option value="a5">5</option> 
    <option value="a6">6</option> 
    <option value="a7">7</option> 
    <option value="a8">8</option> 
    <option value="a9">9</option> 
    <option value="a10">10</option> 
</select> 

这是javascript函数

function selectValue(){ 
if(document.getElementById("dropdown1").value == a){ 
document.getElementById("dropdown2").value = a5; 
} 
} 

这就是all.thanx。