Hi Guys,
I am having a lot of trouble getting my cloned select fields to work properly. All cloned select fields are failing to reflect the selected item that they are populated with. Also, when trying to select a new option on a cloned select field, the selected option does not update.
I have a feeling that there is a very simple solution that I have been overlooking. Thank you for your help.
<div class="address">
<div class="address-clone section-clone">
<!-- Contact Details Box -->
<ul class="section-header list-divider blank" data-inset="false" data-role="listview" data-corners="false" data-icon="false">
<li data-icon="plus" data-theme="f"><a class="clone-section">Address <span class="count"></span></a></li>
</ul>
<fieldset class="half">
<div class="wrap closer">
<input type="text" class="address_name" name="address_name" placeholder="Address Name"/>
</div>
<div class="wrap closer">
<select name="address_type" class="address_type">
<option value="home">Home</option>
<option value="work">Work</option>
</select>
</div>
</fieldset>
<fieldset class="full">
<div class="wrap"><input type="text" class="address_street_1" name="address_street_1" placeholder="Street"/></div>
<div class="wrap"><input type="text" class="address_street_2" name="address_street_2" placeholder="Street 2"/></div>
<div class="wrap"><input type="text" class="address_city" name="address_city" placeholder="City"/></div>
</fieldset>
<fieldset class="half">
<div class="wrap closer">
<select name="address_state" class="address_state">
<option value="blank">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="wrap closer">
<input type="text" class="address_zip" name="address_zip" placeholder="Zip Code" />
</div>
</fieldset>
</div>
</div>
-- Javascript
<script>
var section = $('.address');
var sectionClone = $('.address').clone().addClass('cloned');
$(section).append(sectionClone);
$('.address-clone').each(function(i, t){
$(this).find('.count').html(i + 1);
});
var addrClones = $('#contact-edit .address').children('.address-clone');
contact.address.forEach(function(n){
var i = contact.address.indexOf(n);
$(addrClones[i]).find('.address_name').val(n.address_name);
$(addrClones[i]).find('.address_street_1').val(n.address_street_1);
$(addrClones[i]).find('.address_street_2').val(n.address_street_2);
if(n.address_type == 'work'){
$(addrClones[i]).find('.address_type option[value="work"]').attr('selected',true);
}
$(addrClones[i]).find('.address_city').val(n.address_city);
$(addrClones[i]).find('.address_state').val(n.address_state);
$(addrClones[i]).find('.address_zip').val(n.address_zip);
});
// clone address section
$('.clone-section').click(function(){
alert('test');
var section = $(this).closest('.address');
var sectionClone = $(this).closest('.address').html();
$(section).append(sectionClone);
$('.address-clone').each(function(i, t){
$(this).find('.count').html(i + 1);
})
});
</script>
