looping selectors and hiding field

I am trying to loop over selectors and based on each selector status, hide or show a particular field.  My issue is that looping over the selectors is sequential so I may show the field for the first selector only to have it hidden by the last selector.

In my example, I have four fields and they each of an original value.  I use a has_changes() function to determine if field value changes at all.  Then there is another field called "status".  So if the original value of aaa = 0 and it is changed to 2, then the status field will be displayed.  If the value of aaa is returned to the value of 0 (in the same session) then it should hide status.  However, if ccc also changed, then status will remain visible; basically status will only hide when those four fields have their original values (the status field is hidden when the page first loads).

The code is the 2nd one at the bottom.  I completely see the problem with my logic so I know why it is not working.  However, I don't know how to best code this, such as breaking out of the bind and returning a value such as true if any of the fields changed?  Or is there a way to check all the fields at once with then hide/show the status field based on that true/false result?

I think I had this working at one point except that there were serious performance issues so I deleted all of that code.  I believe what I did was something like this.  Other than this having performance issues, it also  requires that I hard code each of the fields.  I am hoping for a more elegant approach to this.  At least it seems to work properly but I would like to know if there's a better way to accomplish this.

$("#aaa, #bbb, #ccc, #ddd").addClass("myclass");
$(".myclass").bind("change.item"), function()
{
   if(has_changes("aaa") || has_changes("bbb") || has_changes("ccc") || has_changes("ddd"))
  {
     // show the status field
  }
 else
  {
    // hide the status field
  }
});

Open in new window


$("#aaa, #bbb, #ccc, #ddd").addClass("myclass");
$(".myclass").bind("change.item"), function()
{
  var hasChanges = false;
  if(has_changes(this.id)
  {
    console.log(this.id + has changed");
   hasChanges = true;
  }
  if(hasChanges)
  {
    // show "status" field
  }
  else
  {
    // hide "status" field
  }
});

Open in new window

mock5cAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Slick812Commented:
greetings mock5c , , I can not closely follow some of your logic you say for this, , I tend to try and use binary (on or off) logic for this kind of thing.  Since the value (original) is false (zero) then that's the test , as -
       on change func
 if ($("#aaa").val() != '0') $("#stat").show(); else
      if( ($("#bbb").val() != '0')  &&  ($("#ccc").val() != '0') )  && ($("#ddd").val() != '0')
          $("#stat").hide();
 
 - - - - - - - - - - -
OR to can use a JS variable or element "data" set to record the current show-hide state and if it is already show, or hidden then just return out of the function.

it is also possible to use an array or object to record the current status of all elements in play, the status is visible, and the 4, 8, 20 different selectors.

- - - - -


var selNot0 = [];

change.item"), function() {
   if (this.value != '0') {
       $("#stat").show();
       selNot0.push(this.id);
      } else {
      var io = selNot0.indexOf(this.id);
      if(io > -1) {
        if (io == 0) selNot0.shift(); else
             selNot0.splice(--io, 1);
        }
      if (!selNot0.length) $("#stat").hide();
      }

}

this is untested, and will not work as written, just from memory, but may show you something.
Slick812Commented:
had time today and did the following code
<!doctype html>
<html><head><title>jQuery select change</title>
<style>
body{background:#e3f7ff;}
.myclass{color: #960;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>  // I use the latest version of Jquery as 1.11.2

var selNot0 = [];

 $(function() {
$( ".myclass" ).change(function() {

  if (this.value != '0') {
    $("#stat").show();
    if (selNot0.indexOf(this.id) < 0) selNot0.push(this.id);
    } else {
    selNot0.splice(selNot0.indexOf(this.id)-1, 1);
	//alert("arrry length = "+selNot0.length);
	if (!selNot0.length) $("#stat").hide();
    }
      
  }); // end of .change(function()
  
});// end $(function()

</script>
</head>
<body><h3 style="text-align:center;">jQuery select change</h3>
<form id="fm1" name="selFrm">
Server Language - <select id="sel1" name="sel1" class="myclass">
  <option value="0">None</option>
  <option value="1">PHP</option>
  <option value="2">JAVA</option>
  <option value="3">ASP</option>
</select><br />

Government Agency - <select id="sel2" name="sel2" class="myclass">
  <option value="0">None</option>
  <option value="1">FBI</option>
  <option value="2">CIA</option>
  <option value="3">NASA</option>
</select><br />

Buisness Type - <select id="sel3" name="sel3" class="myclass">
  <option value="0">None</option>
  <option value="1">BANK</option>
  <option value="2">RETAIL</option>
  <option value="3">WHOLESALE</option>
</select><br />

Kitchen Applance - <select id="sel4" name="sel4" class="myclass">
  <option value="0">None</option>
  <option value="1">STOVE</option>
  <option value="2">SINK</option>
  <option value="3">FRIDGE</option>
</select>
<div id="stat" style="display: none; width: 16em; 
  color: #d00; background: #bfb; font-size:120%; padding:1em;">
You Have Made a Section<br />That will be sent in POST
</div>
</form>
</body></html>

Open in new window

this works for me

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.