在需要根据用户选择隐藏或显示div的表单上工作。 我设法获得了第一个div选择器值来显示第二个div,但是基于第二个div选择器值却没有显示第三个。 只是将我的头缠在Javascript上,并感谢任何帮助。

这是一般的HTML

<!-- Div 1 -->

  <div class="col-md-12">
<div class="form-group">
    <select class="form-control" id="div1">
  <option value='0'>Select one</option>
  <option value='1'>Choice 1</option>
  <option value='2'>Choice 2</option>
  <option value='3'>Choice 3</option>
  <option value='4'>Choice 4</option>

</select>
  </div>
  </div>

<!-- Div 2 -->

<div class="col-md-12" id="div2">
  <div class="form-group">
    <label for="div2">Label for Div 2</label>

    <select class="form-control" id="div2">
  <option value='0'>Select one</option>
  <option value='1'>Choice 1</option>
  <option value='2'>Choice 2</option>
  <option value='3'>Choice 3</option>

</select>
  </div>
  </div>

<!-- Div 3 -->
  <div class="col-md-6" id="div3">
  <div class="form-group">
  <label for="div3">Div 3 label</label>
  <input type="text" class="form-control" placeholder="Enter value">
 </div>
  </div>

这是脚本:

<script>

$(document).ready(function() {

    $('#div2').hide();

    $('#div1').change(function(){
        if($('#div1').val() > 2) {
            $('#div2').show('fast'); 
        } else {
            $('#div2').hide('scale'); 
        }
   }); 

    $('#div3').hide();

    $('#div2').change(function(){
        if($('#div2').val() > 2) {
            $('#div3).show('fast'); 
        } else {
            $('#div3').hide('scale'); 
        }
   }); 

  });

// end ready()

  </script>

===============>>#1 票数:0 已采纳

您已经获得了具有相同ID的div和selects。 它无法识别div“ div2”的任何值,因为没有任何值。

更改HTML:

<!-- Div 1 -->

  <div class="col-md-12">
<div class="form-group">
    <select class="form-control" id="div1-selector">
  <option value='0'>Select one</option>
  <option value='1'>Choice 1</option>
  <option value='2'>Choice 2</option>
  <option value='3'>Choice 3</option>
  <option value='4'>Choice 4</option>

</select>
  </div>
  </div>

<!-- Div 2 -->

<div class="col-md-12" id="div2">
  <div class="form-group">
    <label for="div2">Label for Div 2</label>

    <select class="form-control" id="div2-selector">
  <option value='0'>Select one</option>
  <option value='1'>Choice 1</option>
  <option value='2'>Choice 2</option>
  <option value='3'>Choice 3</option>

</select>
  </div>
  </div>

<!-- Div 3 -->
  <div class="col-md-6" id="div3">
  <div class="form-group">
  <label for="div3">Div 3 label</label>
  <input type="text" class="form-control" placeholder="Enter value">
 </div>
  </div>

并且,jQuery引用将起作用。

JSFiddle: http : //jsfiddle.net/ff8hxu93/

===============>>#2 票数:0

缺少一个'这里$('#div3).show('fast'); 并且您的id相同。 这是工作中的小提琴 注意对id s的更改。 您还应该检查$(this) -我在第二个change侦听器中提供了其用法示例

  ask by Boomspot translate from so

未解决问题?本站智能推荐:

1回复

隐藏表单并在表单提交上显示div

我试图隐藏div id="first"的表单,并在按下提交按钮时显示div id="second" 。 下面是我正在使用的代码,但它无法正常工作。 结果是在页面返回其原始视图之前“快速”隐藏div id="first"和“快速”显示div id="second" 。 有人可以帮我纠正一
1回复

我想通过使用多个div显示和隐藏它们来制作多部分表单

这是jquery部分,将提供jfiddle $(document).ready(function(){ }); http://jsfiddle.net/hfes4ugn/
1回复

使用jQuery提交表单后隐藏一个div?

我在表单提交按钮上使用onclick函数来隐藏div。 但它没有隐藏。 做这个的最好方式是什么? 提交表单后,我想在页面上隐藏div。
3回复

表单验证后的jQuery显示/隐藏div

我在表单提交后显示加载消息,如下所示: 我使用jquery验证插件验证我的表单: 现在,在表单提交中,我看到加载消息和验证错误框(提交空表单值)。 当我的表单使用验证插件没有错误时,我需要显示加载消息。 如何解决这个问题?
2回复

使用按钮切换显示/隐藏div以获取多个结果

我正在开发一个课堂学生出勤站点,我在做什么,我期望我的php编码是什么,它的工作状况还不错...更新出勤率时,每个学生只需单击学生列表页面中的每个学生缩略图,即可工作... 我的问题是我在缩略图上为每个学生添加了一个add description按钮,它是不可见的,当用户将鼠标悬停在学生缩
4回复

显示基于选择值隐藏多个div

寻找一些jQuery帮助以我创建的简单形式隐藏和显示内容。 选择字段中的选择选项1-3应该显示三个数据响应div之一,并显示其余表单的内容(data-form-order 2)。 我认为数据属性将是一个不错的选择,但对从何处开始却不确定。
2回复

动态更改多个隐藏的表单字段

我对jQuery有点陌生。 我很确定这是可能的,但是我没有引述某些如何编写此代码。 我想做的是使用带有代表范围的选择的下拉菜单(例如,如果某人正在搜索卧室,则下拉选择看起来像是“ 0-2”,“ 3-5”,“ 6+”)。 然后,当某人选择一个选择时,将动态填充两个隐藏字段。 一个字段的
1回复

检查表单中的多个div,如果div没有指定的类,则执行警报并阻止提交

好吧,我有一个动态创建的多个div,取决于一个变量,我想检查每个,如果它有一个特定的类。 当我上传一个图像然后将图像附加到<div id="img-pick"> ,并添加一个allocated的类。 我想检查一个或任何一个div是否没有allocated类然后做一个警报并在单击提
1回复

不同div中有多个表单元素-提交一个会重置其他表单

我正在尝试执行以下操作:我有一个包含多个div的页面,每个页面都包含一个图形和一个form元素(其中包含一个选择器,该选择器具有一些用于配置图形的选项)。 现在,当用户在其中一个div上提交表单时,该div中的图形会发生变化。 但是,如果用户决定在另一个div中提交另一个表单,则所有其他di
1回复

使隐藏的div和输入对于使用jquery.validate提交的有效表单是可选的

我的表格可能只有一页或两页,具体取决于是一个人还是两个人一起申请。 我现在正在做的是启用一个链接,该链接允许用户通过onchange事件显示其共同申请人的下一组表单元素,该事件显示将滑动的链接切换第一个用户的输入并显示其他输入用户。 这是一个很长的表格,所以我将其缩减为几个元素,以便于进行摆