[eluser]slowgary[/eluser]
Sure, you could do the array thing to. Then you'd just get rid of the iterator altogether. The reason the "
elected" modifier didn't work is because it actually needs a space before it. I cleaned up the demo a bit, added some styles, used prepend instead of append so that new additions appear at the top, plus I made the submit button appear dynamically so that the form can only be submitted after a field is added. Try this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<title></title>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1' />
<style type='text/css'>
body {
font-family: sans-serif;
}
.cause {
position: relative;
width: 200px;
padding: 10px;
margin: 5px 0px;
background: #EEE;
border: 1px solid #DDD;
}
select {
padding: .15em;
font-size: medium;
margin-bottom: 20px;
}
#submit {
width: 200px;
padding: 10px;
background: #EEE;
border-top: 1px solid #CCC;
}
button {
cursor: pointer;
color: #FFF;
padding: .2em .3em;
line-height: 1em;
font-size: medium;
font-weight: bold;
background: #59983B;
border: 1px outset #59983B;
}
#submit input {
cursor: pointer;
color: #FFF;
padding: 5px 10px;
font-size: small;
font-weight: bold;
background: #3B5998;
border: 1px outset #3B5998;
}
.remove {
position: absolute;
top: 50%;
right: 15px;
cursor: pointer;
padding: 2px 4px;
margin-top: -.8em;
color: #999;
font-size: 11px;
}
.remove:hover {
color: #F00;
background: #FCC;
}
</style>
< script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' >< /script >
< script type='text/javascript' >
//this code assumes jquery inclusion
//assures the DOM is loaded before running this code
$(document).ready(function(){
//binds the following code to the 'click' of our button
$('#add_cause').bind('click', function(){
if($('.cause').length == 0)
{
$('#causes').append("<div id='submit'><input type='submit' value='Add Record'/></div>");
}
//add the form field, plus a remove link, plus a container div
$('#causes').prepend(
"<div class='cause'><input type='hidden' name='causes[]' value='" +
$('#cause_select').val() +
"'/><span>" +
$('#cause_select :selected').text() +
"</span><span class='remove'>[remove]</span></div>"
);
});
//bind the following code to all current and future elements with class 'remove'
$('.remove').live('click', function(){
//look for a parent element with class 'cause' and remove it from the DOM
$(this).parents('.cause').remove();
if($('.cause').length == 0)
{
$('#submit').remove();
}
});
});
</ script >
</head>
<body>
<select id='cause_select' name='cause_select'>
<option value='first'>first cause</option>
<option value='second'>second cause</option>
<option value='third'>third cause</option>
<option value='fourth'>fourth cause</option>
</select>
<button id='add_cause'>+</button>
<form action='somescript' method='post'>
<div id='causes'>
</div>
</form>
</body>
</html>
