2013-08-24 44 views
0

我有一个功能在jQuery上添加窗体,但我需要修复该功能以显示编辑窗体上的div。如果选择的值显示div jQuery

示例添加形式:

的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

好,但是当我打开编辑的形式和 “拒绝” 被选中原因仍然隐藏在决策中。

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

任何帮助非常感谢。

回答

4

你可以只触发事件与一个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/

+0

完美,错过了.trigger,THX了很多。 – Dario

相关问题