jquery - 如果选择了值，则显示 div jQuery

Question

我在添加表单上有一个在 jQuery 中工作的函数，但我需要修复该函数以在编辑表单上显示 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 示例

很好，但是当我打开编辑表单并选择“拒绝”时，原因仍处于隐藏状态，而决定显示在显示中。

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

非常感谢任何帮助。

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/