<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Demo
</title>
<style type="text/css">
div.item {
background:#eee;
display:block;
margin:10px;
padding:10px 10px 5px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<h1>If you add an item and select an option, content added by previous selections should NOT be removed.</h1>
<div id="items">
<div class="item" id="first">
<p>
<label for="serviceItem1">
Item:
</label>
<select id="serviceItem1" name="serviceItem1" class="selectService">
<option value="">
--- Please Select ---
</option>
<option value="a">
a
</option>
<option value="b">
b
</option>
<option value="c">
c
</option>
</select>
</p>
</div>
</div>
<p>
<input id="addItem" type="button" value="Add Item" />
</p>
<div id="itemCage">
<!-- <div class="a serviceStuff">
<p>a</p>
</div>
-->
<!-- <div class="b serviceStuff">
<address>b</address>
</div>
-->
<!-- <div class="c serviceStuff">
<p>Item C</p>
</div>
-->
</div>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
$('input').attr('checked', false);
$('select.selectService').val('');
selectService();
var ci = 1;
var u = $('#first').html();
$('#addItem').click(function() {
ci++;
var cii = 1;
while ($('#items').html().indexOf('Item' + cii) !== -1 && cii < 9999) cii++;
$('#items').append('<div class="item" id="added' + ci + '">' + u.replace(/Item1/g, "Item" + cii) + '</div>');
$('#added' + ci).hide();
$('#added' + ci + ' span').hide()
$('#added' + ci).slideDown(400, function() {
$(this).css('height', 'auto')
});
selectService();
if ($('div.item').size() > 4) {
$('#addItem').css('display', 'none');
$('.later').css('color', '#fa0000')
}
});
});
function selectService() {
$('select.selectService').unbind('change');
$('select.selectService').change(function() {
$('.serviceStuff').remove();
showComments(this, $(this).val());
});
}
function showComments(t, _class) {
var r = new RegExp('<([^\\s]+)[^>]*class="' + _class + '([\\S\\s]*?)</\\1>', 'g');
var uncommented = $("#itemCage").html().match(r);
if (uncommented) {
var ci = String($(t).parent().find('label').first().attr('for').substr(11));
$(t).parent().append(String(uncommented[0].replace('Item1', 'Item' + ci)));
}
}
/* ]]> */
</script>
</body>
</html>
Experts Exchange (EE) has become my company's go-to resource to get answers. I've used EE to make decisions, solve problems and even save customers. OutagesIO has been a challenging project and... Keep reading >>
Our community of experts have been thoroughly vetted for their expertise and industry experience.