We Keep Coding

jquery clone and select/select2 selected values on jquery cloned elements getting lost

I'm currently in trouble with a select/select2 and jQuery $.clone issue.
In a html form with html select boxes replaced with select2 but the select2 jQuery plugin is not really relevant for this issue.
I experience problems when I use jQuery $.clone(true, true) to get a copy of a form to work on it.
When I try the following:
window.clone = $('#formSelector').clone(true,true);
The selected values are cloned and get lost. See http://jsfiddle.net/straeger/ct31f34c/9/
Even If I try to remove select2 with the call the cloned select boxes do not hold the selected values.
$('select').select2('destroy');
window.clone = $('#formSelector').clone(true,true);
see: http://jsfiddle.net/straeger/dokenyss/1/
A small hack with a big drawback (if no ID is present) is to copy the selected values to the clone:
$clone.find('select')
.each(function(index, value){
var $el = $(value);
$el.val($element.find('#'+$el.attr('id')).val());
});
see: http://jsfiddle.net/straeger/ct31f34c/10/
My question is what would be the correct way to handle such a problem ?
Does anyone know a way to select the counterpart of the original element from the original jQuery element if I have no ID?
Or a way to persist the currently selected option ? via the attribute e.g.
<option value="c" selected>C Value</selected>

Weird dropdown menu issue in Javascript

I am having a weird issue regarding the dropdown menu.
I have
company.prototype.buildTable=function(){
var thisObj=this;
tableTD = createElement('td');
tableTD.onclick=function(){thisObj.edit(this);}
this.table.appendChild(tableTD); //append td to the table
// more td
}
company.prototype.edit = function(thisRow) {
$thisRow=$(thisRow);
var menu=document.createElement('select');
menu.className='menu';
//employees is an array containing employee info
for(var i=0; i<employees.length; i++){
var option=document.createElement('option');
option.className='option';
option.innerHTML=employees[i].name;
option.value=employees[i].email;
menu.appendChild(option);
}
$thisRow.append(selectMenu);
}
I can see a dropdown menu in my td. However, when I click the menu, I had to hold my mouse to
keep options open otherwise the options menu will close. Even if I hold my mouse and select one option,
the dropdown menu value wont' change (it still show the first option in the select menu). I hope I explain my issue well.
Can anyone help me with this weird issue?

IIRC, there are some weird cross browser issues with appending options as DOM elements. The preferred way to add options is simply:
menu.options[i] = new Option(employees[i].name, employees[i].email);
EDIT:
Do not to use appendChild on select and do not use innerHTML on select elements. TL;DR: HTMLSelectElement is special and has quirks in IE

InnerHTML not working with <SELECT> and <OPTIONS> in IE... fine in Firefox. Ideas?

So, my hope was to create a checkbox that upon clicking would call a function to populate values of one part of a form into another. This is useful when creating a button that says "Use my Main Address" for the Billing or Shipping address. Javascript wise, I've created this:
function fillBilling() {
if (document.getElementById('useMain').checked) {
document.getElementById('ccFName').value = document.getElementById('firstName').value;
document.getElementById('ccLName').value = document.getElementById('lastName').value;
document.getElementById('ccAddr1').value = document.getElementById('address1').value;
document.getElementById('ccAddr2').value = document.getElementById('address2').value;
document.getElementById('ccCity').value = document.getElementById('city').value;
document.getElementById('ccZip').value = document.getElementById('zip').value;
document.getElementById('ccState').innerHTML = document.getElementById('state').innerHTML;
}
}
And you know... it works perfectly in Firefox. I've used "innerHTML" in the case of the state code because the state code is selected via dropdown, as opposed to a text input.
I've seen how there is a problem with innerHTML with regard to tables, but... this isn't a table. It's a SELECT tag. Is there a workaround? I'm not looking to add options to the select statement, but in a perfect world, I'd make the same selection from the "state" to the "ccState" value. They're both populated from the same table, so the list of possible values is identical. Suggestions?

If they're identical, try updating just the selectedIndex
document.getElementById('ccState').selectedIndex =
document.getElementById('state').selectedIndex;

You can change the text of an option with the option's .text property, in IE or any other browser.

Is there a simple way to know the starting value of a select?

I'd like to do this simply without saving the starting value of the select in an object.
if i have (when i load the dom):
<select>
<option value='1' selected>one</option>
<option value='2' >Two</option>
and than i later change the selection so that another option is selected, is there some kind of property that stores the value of the option that was originally selected?

I think this sholud work:
$("select option[selected]").val()
fiddle: http://jsfiddle.net/4dCMd/
Tested this way in different browsers: seems to be broken in IE7/8, works in last Chrome, FF and IE9

You should use the defaultSelected property of the options object to test if it was selected by default.
http://www.javascriptkit.com/jsref/select.shtml

use this
$('select').find('option[selected]').val();
DEMO

$('select').each(function(){
$(this).data('originalValue',$(this).val());
});
You could do this on .ready. It'll store the default values of every select in it's data object.
Oh just re-read your question and you said that's exactly what you don't want.
Well, i don't think there's another efficient way to do it so i'll leave it here anyway.

simple to use filter to get any default selected options:
var def = $("select > option").filter(function () {
return this.defaultSelected;
});
DEMO
DefaultSelected
Reflects the value of the selected HTML attribute. which indicates whether the option is selected by default.

When trying to remove any selected option in an select element, Safari shows it as blank

Examine this code. I'm using jQuery, but I think it is probably irrelevant.
JavaScript
​$(function() {
$('button').click(function() {
$('select option[selected]').removeAttr('selected');
});
});
HTML
<select>
<option>a</option>
<option selected="selected">b</option>
<option>c</option>
</select>
<button>give me a click</button>
This was working fine for having the button reset the select to the first option. I just tested it in Safari, and it blanks the select instead of selecting the first.
This isn't an issue, until I got it up and running on an iPad, which is where the majority of this web app will be used. The problem with the iPad is, after then selecting an option, the select refuses to display the option selected. It still displays as blank.
What is the best way to get around this?
​

You can fix the behaviour by explicitly setting the index using JavaScript's native selectedIndex property.
$(function() {
$('button').click(function() {
$('select option[selected]').removeAttr('selected');
$('select')[0].selectedIndex = 0;
});
});​
If you have more than one select element, you will need to iterate through with jQuery's each and set the property on this.

What about:
$('select option:first-child').attr('selected', 'selected');