如果不满足条件，则隐藏附加的表单字段

Question

I have this append script that adds in a set of field on my form. Based on the appended field, I would like for the "upg" select field to ONLY display if the valus for "status" is "Actual". This condition should be applicable to all the appended field set so that if status1 is Actual I have a upg field but is status2 is Ghost, upg2 field should be hidden and so on. What do you guys suggest as the best way to do this?

    <script type="text/javascript">
    var count = 0;
    $(function(){
    $('a#add_field').click(function(){
    count += 1;

    $('#activation').append(
        '<div class="row-fluid">'                   
        +'<div class="span12" style="border-bottom:1px #dddddd; background-color:#e8e8e8; ">'

                +'<div style="float:left; width:7%;">'
                +'<label>&nbsp;</label>'                    
                +'<select name="status' + count + '" id="status' + count + '"  class="input-small">'
                +'<option value="Ghost">Ghost</option>'
                +'<option value="Actual">Actual</option>'
                +'</select>'
                +'</div>'

                +'<div style="float:left; width: 7%">'
                +'<label>Type</label>'
                +'<select id="upg' + count + '" name="upg' + count + '"  class="input-small" >'
                +'<option value="" selected="&nbsp;" >&nbsp;</option>'
                +'<option value="Exp" >Exp</option>'
                +'<option value="Post" >Post</option>'
                +'<option value="Upgrade" >Upg</option>'
                +'<option value="Retail" >Retail</option>'
                +'</select>'
                +'</div>'
         );     
      });   
});

Answer 1

I personally find it easier to break up a complex set of html - especially one that uses some type of logic to determine the final dom - into multiple jquery objects. Although it's slower to append multiple objects together, as opposed to doing it inline, sometimes it's worth the clarity.

Anyway, you need some data or setting that is determining the initial selected option of status, and you can use that same value to show/hide the corresponding upg. I would suggest you break it up into two appends, hide it before appending it to the dom so you dont see the upg select flash:

var some_setting_or_db_val = 'ghost';

var row = $('<div class="row-fluid">'                   
    +'<div class="span12" style="border-bottom:1px #dddddd; background-color:#e8e8e8; ">'

            +'<div style="float:left; width:7%;">'
            +'<label>&nbsp;</label>'                    
            +'<select name="status' + count + '" id="status' + count + '"  class="input-small">'
            +'<option value="Ghost">Ghost</option>'
            +'<option value="Actual">Actual</option>'
            +'</select>'
            +'</div>'

            +'<div style="float:left; width: 7%">'
            +'<label>Type</label>'
            +'<select id="upg' + count + '" name="upg' + count + '"  class="input-small" >'
            +'<option value="" selected="&nbsp;" >&nbsp;</option>'
            +'<option value="Exp" >Exp</option>'
            +'<option value="Post" >Post</option>'
            +'<option value="Upgrade" >Upg</option>'
            +'<option value="Retail" >Retail</option>'
            +'</select>'
            +'</div>');

if(some_setting_or_db_val == 'ghost'){
    row.find("#upg" + count).hide();
}

$('#activation').append(row)