Appending & clearing text

All right. So i have this (following up on that ddList) in my js.

$(s2).bind({mouseup:function() {
			var s2v=$('#slct2').val();
			var box = $("#box2");
			
				if(s2v=="one"){
					box.append("<p>option one congrats</p>");
				}else if(s2v=="two"){
					box.append("<p>option two congrats</p>");
				}else if(s2v=="three"){
					box.append("<p>option three congrats</p>");			
				}else if(s2v=="four"){			
					box.append("<p>option four congrats</p>");		
				}else if(s2v=="five"){			
					box.append("<p>option five congrats</p>");	
				}else if(s2v=="six"){			
					box.append("<p>option six congrats</p>");
				}else if(s2v=="seven"){			
					box.append("<p>option seven congrats</p>");
				}else if(s2v=="eight"){			
					box.append("<p>option eight congrats</p>");
				}else if(s2v=="nine"){			
					box.append("<p>option nine congrats</p>");
				}

		if(box.append()!=""){
		   box.empty();
		   }	
		optionArray.forEach( function(box) {		
		var updateTxt = option.box.append();
		box.append(updateTxt);
		console.log(box.val());			
	});
   }				
});//end s2 ifBlocks

and this in my php

<div id="selectDrop2" class="selectDrop">
			<h2>choose B</h2>	
			<hr/>			
			<select id="slct2" name="slct2">
			</select>

			<div id="box2" class="box">
			</div>
			
			
		</div>	

it works. but am running into the same prob as before and have not been able to trouble shoot it. I must be missing on the logic. But when ever i use the drop down list it keeps on appending. & I have been trying just about everything. If I could please get some advice?

Are you just wanting to clear the box each time before setting it’s content?

var box = $("#box2").html('');
1 Like

Any time you repeat yourself in code like this it should be a sign that you can remove the duplication.
All of that can be replaced with

box.append("<p>option " + s2v + " congrats</p>");

I think this is the complete script you’re after

$(s2).change(function() {
  var s2v = $('#slct2').val();
  $("#box2").html("<p>option " + s2v + " congrats</p>");
})
1 Like

Yes thanks, eventually I want to put XML data there.
But also what logic am I not getting, when it comes to clearing and appending the new text?

Not sure how that changes things.

But also what logic am I not getting, when it comes to clearing and appending the new text?

You’re never clearing the text. Also, this code is really confused.

  • append doesn’t do what you think it does, you should always pass it an element to append.

  • where are optionArray and option.box coming from?

  • Why are you attempting to empty an element just after populating above?

if(box.append() != ""){
  box.empty();
}
optionArray.forEach(function(box) {        
  var updateTxt = option.box.append();
  box.append(updateTxt);
  console.log(box.val());
})

If this code does what you want, start from there:

$(s2).change(function() {
  var s2v = $('#slct2').val();
  $("#box2").html("<p>option " + s2v + " congrats</p>");
})
1 Like

Thx will go try it out.

Yep your solution makes perfect sense. Thx again.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.