jsp中的JavaScript onclick事件

JavaScript onclick event in a jsp

本文关键字：事件 onclick JavaScript 中的 jsp      更新时间：2023-09-26

我正试图根据另一个下拉列表的选择，从下拉列表中的Jsp中动态选择Jsp上的值。例如：我有两个下拉列表1-A，B，下拉列表2的值为1到10。所以当我选择A时，我希望根据onclick事件从下拉列表中动态选择5个值。有可能吗？？

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

如果您使用<select>进行下拉，则需要捕获第一个下拉的change事件——每次下拉值更改时都会触发该事件。

为了使代码更易于阅读并避免跨浏览器问题，您可以使用jQuery来处理这种情况。

因此，如果您有一个ID设置为dropdown1的<select>元素，您可以尝试以下操作：

jQuery("#dropdown1").change(function () {
    var selectedValue = jQuery(this).val();
    // Now use to value to do other stufffs
});

但是，如果您有第二个值的"下拉列表"，则不可能选择多个值。一个基本选项是将此下拉列表转换为列表，并使用multiple="multiple"启用多重选择（参考：http://www.w3schools.com/tags/att_select_multiple.asp)

也就是说，您只需要使用<select multiple="multiple">

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

然而，让我们考虑一下，对于dropdown1的值A' of dropdown1 the selected values in dropdown2 will be '1', '2' and '4'; for value B'，dropdown2中选择的值将是'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/

试试这个。这个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;
}
}

仅此而已。

相关文章：