Question

我在Add表单上有一个在jQuery中工作的函数，但我需要修复该函数以在Edit表单上显示div。

示例添加表单：

jQuery的：

$(document).ready( function() {
  $('#status').bind('change', function (e) { 
    if( $('#status').val() == 'Rejected') {
      $('#reason').show();
      $("#reason").css({ display: "inline-block" });
      $('#decision').hide();
    }
    else if( $('#status').val() == 'Accepted') {
      $('#reason').hide();
      $('#decision').show();
    }         
  });
});

形式：

<div class="status" style="display:inline-block;"> Status: 
<select name="status" id="status">
<option value="Accepted" selected="selected">Accepted</option>
<option value="Rejected">Rejected</option>
</select>
</div>
<div id="reason" style="display:none;">&nbsp; Reason: <input type="text" name="reason" value="" placeholder="The reason..."></div>
<div id="decision" style="display:inline-block;">&nbsp; Decision:
<select name="decision">
<option value="Waiting" selected="selected">Waiting</option>
<option value="Send">Send</option>
</select>
</div>

JSFiddle example

很好，但是当我打开编辑表单并选择“已拒绝”时，原因仍然隐藏在显示中的决策中。

我的问题是，如果被拒绝，我该如何做出“隐藏”决定和“显示”原因？

非常感谢任何帮助。

Answer 1

您可以使用trigger('change')这样立即触发事件：

$(document).ready( function() {
  $('#status').bind('change', function (e) { 
    if( $('#status').val() == 'Rejected') {
      $('#reason').show();
      $("#reason").css({ display: "inline-block" });
      $('#decision').hide();
    }
    else if( $('#status').val() == 'Accepted') {
      $('#reason').hide();
      $('#decision').show();
    }         
  }).trigger('change');
});

http://jsfiddle.net/VLQKw/1/

如果选择值jQuery，则显示div

1 个答案: