根据下拉选择显示div

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();

小提琴