Question

我收到了这段代码：

<form>
<select name="lelel">
  <option value="x">x</option>
  <option value="xx">xx</option>
  <option value="xxx">xxx</option>
</select>
</form>
<div id="divid">
  LALALALALA
</div>

我的问题是，我可以制作div＆＃34; divid＆＃34;不可见，然后当用户选择选项xxx时，div将出现。

Answer 1

＆＃13;

$('[name=lelel]').change(function(){
    if ( this.value == 'xxx') {
       $('#divid').show();
    }else{
       $('#divid').hide();
    }
});

＆＃13;

#divid {display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<select name="lelel">
  <option value="x">x</option>
  <option value="xx">xx</option>
  <option value="xxx">xxx</option>
</select>
</form>
<div id="divid">
  LALALALALA
</div>

＆＃13;

Answer 2

如果您要根据用户选择显示/消失几个div，您可以按照JS代码继续进行乱码回答

$('select').change(function(){
  var chosen_one = $(this).value();
  $('.toShow').hide();
  $('#'+chosen_one).show();
})

然后，您可以将所有显示/隐藏的div设为toShow，并将其设置为CSS中的display: none;。然后，当您添加更多选项/ div时，您不必修改JS或CSS

如何仅在选择列表中的特定项目时才显示div

2 个答案: