Home/ Questions/Q 8830441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T08:05:20+00:00

I have this append script that adds in a set of field on my

  • 0

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>'
         );     
      });   
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)
    • 0