Dynamically creation select box options issue in IE8 - javascript

I am using the following function to create a add options to my select box
//add options to the requested select box
addOptionsToSelect : function(__enum , obj, selected_value) {
$(__enum).each(function(i){
var optn = new Option(this.text, this.val)
if(selected_value === this.val){ optn.setAttribute('selected', 'selected') }
$(obj)[0].options.add(optn);
});
return obj
}
__enum is the key value pair containing the value and the text that we pass to the select option
obj is the select box obj which is also created dynamically
selected_value is the value that needs to set as selected on the select box.
The problem here is optn.setAttribute('selected', 'selected') works fine in all the browsers expect IE8.
I am looking for a workaround that will allow me to set the selected value in all the browsers dynamically.


I'd add an option to a like so:
var select = document.getElementById("drop-down");
var newOption = document.createElement("option");
newOption.innerHTML = 'hello';
select.appendChild(newOption);
Here's an example: my fiddle

Related

how to get all selected option select2

I have many select2 in one page so I want to get all selected option as a array
how it's possible?
i've tried this
console.log($("select").val());
but it just gives me the first selected option

I hope this will work :
var select = $("select");
var valArray = [];
select.each(function(index){
valArray.push($( this ).val());
});
console.log(valArray);

JQuery get the option of a checkbox checked

I'm doing some code where i need to get the option(value) from an checkbox checked
Here is how i create the checkbox
function createCheckbox(txt) {
var comb = document.createElement("Select");
comb.className = "something";
for (var i = 0; i < txt.length; i++) {
var option = document.createElement("OPTION");
var optionText = document.createTextNode(txt[i]); //some options
option.appendChild(optionText);
comb.appendChild(option);
}
return comb;
}
Function where i need to show the option that is selected
function foo{
var inputTextValue = document.getElementsByClassName("something");
var checkedValue = $(inputTextValue).is(':checked');
alert(checkedValue); //true/false
}
the alert only show true /false depeding if the checkbox is checked or not.But what i need its the option checked. I already tried $(inputTextValue).is(':checked').val().

Checkbox and Select are two different HTML Elements
For Getting the value of Selected option use
$(".something option:selected").val();

I think tou mix here between checkbox and select.
Select option is selected with :selected attribute.
Checkbox is checked with :checked attribute.

The value of a <select> is the value of the selected option.
$(".something").val()

Javascript Option element's Select in IE Compatibility

I am creating a option control in javascript dynamically:
I populate the options from an ajax call's return object.
I check my result object for a default flag, and set the dom object "select"'s "selected" attribute.
This works fine, except for in Compatibility mode the result is not the same.
In IE Compatability Mode (IE 7) the option has the first select value indexed.
select = document.createElement("select");
select.id = "tr_theGrid" + i + "_DropDown";
select.className = "theField"
select.style.width = "100%";
for (var x = 0; x < docpreviews.length; x++) {
option = document.createElement("option");
option.value = docpreviews[x].PrevId;
option.innerHTML = docpreviews[x].PrevName;
if (m_documents_Merge.DocumentsAttachments[i].Previews[x].Selected == "1") {
option.defaultSelected = true;
}
select.appendChild(option);
}
This works fine outside IE, why does IE compatibility mode not recognize this as a selected option?

You should be setting the selected property of the option element:
if (m_documents_Merge.DocumentsAttachments[i].Previews[x].Selected == "1") {
option.selected = true;
}

You can use the Option constructor to create options:
for (var x = 0; x < docpreviews.length; x++) {
// new Option([text[, value[, defaultSelected[, selected]]]])
option = new Option(docpreviews[x].PrevName, docpreviews[x].PrevId);
if (m_documents_Merge.DocumentsAttachments[i].Previews[x].Selected == "1") {
// To make the option selected, but does not make it the default selected option
option.selected = true;
// To make the option the default selected, but does not make it selected
option.setAttribute('selected', true);
}
select.appendChild(option);
}
Setting the selected property to true makes the option selected but does not make it the default selected option, i.e., resetting the form will not set that option to selected.
Setting the selected attribute sets the option to be the default selected option, i.e. if the form is reset, the option is selected, but does not make it the currently selected option.
If you want the option to be selected and be the default selected option, set both the attribute and property.
The defaultSelected property is read only in some browsers and can't be set, though some allow it.

Create a drop down list with options through document.createElement?

What I want to achieve is simple: when you press a button, it creates a select element with options. I can do the select element fine, but the option, not so much. I've tried numerous things. Here's the code that I used, with some comments to help out.
<!--This is the element that we append the JavaScript to. The code that achieves the task is at the bottom.-->
<p id="clonePanel"></p>
<script>
//Don't worry about the first pid stuff.
var pid = 0;
function dupPan() {
pid++;
//Here we create a "p" element. The following code is the element's content and specs.
var newPanel = document.createElement("p");
newPanel.id=pid;
//Here we create a "select" element (a drop down list).
var newList = document.createElement("select");
//Here we create a text node.
var newListData = document.createTextNode("Example of option");
//Here we append that text node to our drop down list.
newList.appendChild(newListData);
//Here we append our list to our "p" element.
newPanel.appendChild(newList);
//Finally, we append the "p" element to the document, or the "clonePanel" p element.
document.getElementById("clonePanel").appendChild(newPanel);
}
</script>
Hopefully the comments helped out. What's supposed to happen is that a select element is generated along with a text node. Then the two are appended together. Finally, all that stuff is appended to a p element, which is finally placed into the document. I know I'm doing something wrong.
I think that my method of creating a text node isn't correct. I think there's something else. If you know the answer could you please tell me the correct line of code? That would be great. And yes, I HAVE looked at any sources I can find for help but to no avail.
Thanks for reading and helping me out!

You're appending a text node to a select, which isn't right. You should append an option instead:
var newListData = new Option("my label", "my value");
//Here we append that text node to our drop down list.
newList.appendChild(newListData);
You can instantiate the Option like above as a shortcut, or you can use document.createElement('option') to do it the long way.
It can be simplified further by losing the variable and just directly appending new options:
newList.appendChild(new Option("my label 1", "my value 1"));
newList.appendChild(new Option("my label 2", "my value 2"));
newList.appendChild(new Option("my label 3", "my value 3"));

A select element can only have option or optgroup child elements. To add options using the Option constructor:
var select = document.createElement('select');
// Use the Option constructor: args text, value, defaultSelected, selected
var option = new Option('text', 'value', false, false);
select.appendChild(option);
// Use createElement to add an option:
option = document.createElement('option');
option.value = 'theValue';
option.text = 'the text';
select.appendChild(option);

<span id="minExp"></span>
<script>
var minExp = document.getElementById("minExp");
//Create array of options to be added
var array = ["1","2","3","4","5","6","7","8","9","10","10","12","13","14","15","16","17","18","19","20","21","22","23","24"];
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute("id", "minExperience");
selectList.setAttribute("class", "form-control");
selectList.setAttribute("name", "minExperience");
minExp.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i]+' Years';
selectList.appendChild(option);
}
</script>

Accessing HTML Form elements through Javascript

Can any guru show me how to get values from HTML Form element - RADIO BUTTON and CHECK BOX?
For example in case of text box we can get the value directly by getElementById(id).value;
But how to get the value for a combo box (drop down menu), radio button and checkbox ?
Thanks.

Drop down (<select>):
var el = document.getElementById('yourSelectId');
var value = el.options[el.selectedIndex].value;
If you're treating your select list as a multi-select (combobox) list, you have to loop through the options and check if they are selected:
var el = document.getElementByid('yourSelectId');
var selectedValues = [];
for (var i = 0; i < el.options.length; i++) {
if (el.options[i].selected) {
selectedValues.push(el.options[i].value);
}
}
// all selected values are now in the selectedValues array.
Radio buttons and checkboxes should also have value properties, but more appropriately I think I would only test whether they are checked:
var isChecked = document.getElementById('yourRadioOrCheckboxId').checked;

For checkbox, the element has a .checked property:
document.getElementById('foo').checked; // true or false

Categories

Resources