Question

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

Answer 1

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

如果您使用<select>下拉列表，则需要捕获第一个下拉列表中的change事件 - 当下拉列表的值发生变化时触发每一周时间。

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

因此，如果您的ID为<select>的{{1}}元素设置为dropdown1，则可以尝试：

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/

Answer 2

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

jsp中的JavaScript onclick事件

2 个答案: