Question

我有一部分像这样的jsp代码：

<div>
<label>Choose the type of procedure you want :</label><select id="proc-type">
<option value="with-param">With parameters</option>
<option value="without-param">Without parameters</option>
</select>
</div>

现在，如果用户选择参数，则应显示以下div：

<div class="drop" id="drop">
<label> Select Procedure (without parameters) : </label> <select id="combobox" name="combobox">
<option>proc 1</option>
<option>proc 2</option>
</select>

并且，如果没有参数，则应显示

<div class="drop" id="drop">
<label> Select Procedure (without parameters) : </label> <select id="combobox" name="combobox">
<option>proc 3</option>
<option>proc 4</option>
</select>
<label>Parameter : </label> <textarea rows=1 cols=30 ></textarea> <br>
<label>Parameter : </label> <textarea rows=1 cols=30 ></textarea> <br>
</div>

我已经尝试了jquery代码：

$(document).ready(function () {
$(".dropdown").hide();
$(".drop").hide();
$("#proc-type").change( function(){
    var opt="";

    opt= $parseInt($("select option: selected").val());

    if(opt == "with-param"){
        ("#dropdown").show(700);
    }
    else {
        ("#drop").show(700);
    }
});
});

但它似乎没有用。任何人都建议我怎么做？

Answer 1

标准的javascript函数是parseInt，而不是$parseInt。而且，根据我的理解，您不需要它 - val()已经返回字符串值。

另外，要从<select>获取值，您可以直接在其上调用val()。所以，你的行变为：

opt = $(this).val();

由于this成为事件发生的元素 - 选择本身。

最后，如果用户改变主意，您可能希望在显示正确的div后hide()另一个div。

Answer 2

嗯，首先，ID应该始终是唯一的（这就是为什么它被称为id）。所以请确保您拥有所有元素的唯一ID。

其次，我在代码中找不到任何ID为下拉列表的元素（你错过了吗？）

无论如何，

解决方案，

<强> HTML

<div class="drop" id="drop1"> //<---here
<label> Select Procedure (without parameters) : </label> 
<select id="combobox1" name="combobox">
  <option>proc 1</option>
  <option>proc 2</option>
</select>
</div>

<div class="drop" id="drop2"> //<---here
<label> Select Procedure (without parameters) : </label> 
<select id="combobox2" name="combobox">
  <option>proc 3</option>
  <option>proc 4</option>
</select>
<label>Parameter : </label> <textarea rows=1 cols=30 ></textarea> <br>
<label>Parameter : </label> <textarea rows=1 cols=30 ></textarea> <br>
</div>

<强> jquery的

$(document).ready(function () {
  $(".drop").hide();
  $("#proc-type").change( function(){

    if(this.value == "with-param"){
        $("#drop1").show(700);
        $("#drop2").hide();
    }
    else {
        $("#drop2").show(700);
        $("#drop1").hide();
    }
  });
});

Answer 3

对于多个元素实例，你不能使用相同的id，id应该是单个页面中每个元素唯一的。我建议你这样改变：

<div class='wrapperdiv'>
  <div class="drop with-param">
    <label> Select Procedure (with parameters) : </label> 
    <select id="combobox1" name="combobox1">
       <option>proc 1</option>
       <option>proc 2</option>
    </select>
  </div>

  <div class="drop without-param">
    <label> Select Procedure (without parameters) : </label> 
    <select id="combobox1" name="combobox1">
       <option>proc 1</option>
       <option>proc 2</option>
    </select>
  </div>
</div>

在css中隐藏div：

.drop{ display:none; }

所以你的jquery应该是这样的：

$('#proc-type').on('change', function(){
    var div2show = this.value;
    if(div2show == 'with-param'){
       $('.with-param').show();
       $('.without-param').hide();
    }else{
       $('.with-param').hide();
       $('.without-param').show();
    }
}).change();

或者（如果你的两个div都包含在某个包装div中）：

$('#proc-type').on('change', function(){
    var div2show = this.value;
    $('.'+div2show).show().siblings('div').hide();
}).change();

根据下拉选择显示div

3 个答案:

Fiddle