How to create Check Boxes in dynamic drop down box using JavaScript? - javascript

function fetchList(ss){
var select = document.getElementById("storeid");
var options = ss;
while (select.options[1]) {
select.removeChild(select.options[1]);
}
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
This way I am able to display the list in the drop down,so how can I display check boxes in the options for multiple selection?

Related

Can`t fill select with options

I just want to fill select with array values.
Here is js code (which I took from here). It doesn't work even without loop. So if I could make it work, then filling with array won`t be a problem.
var sel = document.getElementById('CountrySelect');
var opt = document.createElement('option');
opt.innerHTML = "CountyNumerOne";
opt.value = 0;
sel.appendChild(opt);
<select id="CountrySelect">
</select>
But on the output I get empty list
You must ensure the script is triggered after the select element is parsed by the browser. You can do this either by putting the script tag after your select element, or listening for the document loaded event in your script:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var sel = document.getElementById('CountrySelect');
var opt = document.createElement('option');
opt.innerHTML = "CountyNumerOne";
opt.value = 0;
sel.appendChild(opt);
});
</script>
var select = document.getElementById("CountrySelect");
var options = ["1", "2", "3", "4", "5"]; //array
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}​
http://jsfiddle.net/yYW89/

Change options in select with JavaScript without loosing chosen

I'm trying to reload the options list of a select with JavaScript and JQuery, but I need to preserve previous chosen values.
This is my code:
var temp = $('#SelectName').chosen().val();
select = document.getElementById('SelectName');
if (select.options.length > 0) {
$('#SelectName').find('option').remove();
}
for (var i = 0; i < result.length; i++) {
var option = document.createElement('option');
option.value = result[i].myIdVariable;
option.text = result[i].myTextVariable;
select.appendChild(option);
}
$('#SelectName').chosen(temp);
$('#SelectName').trigger('chosen:updated');
With this code I loose all the chosen values.
I solved with this code:
var temp = $('#SelectName').val();
select = document.getElementById('SelectName');
if (select.options.length > 0) {
$('#SelectName').find('option').remove();
}
for (var i = 0; i < result.length; i++) {
var option = document.createElement('option');
option.value = result[i].myIdVariable;
option.text = result[i].myTextVariable;
select.appendChild(option);
}
$('#SelectName').val(temp);
$('#SelectName').trigger('chosen:updated');
The difference is that now I use:
var temp = $('#SelectName').val();
and
$('#SelectName').val(temp);
previously:
var temp = $('#SelectName').chosen().val();
and
$('#SelectName').chosen(temp);

Replacing option in select field (not adding)

I have a select field as follows:
<select id="field">
I add options based on values found in another div (OtherDiv) on my page like this:
window.onload = function onload()
{
var OtherDiv = document.getElementById('OtherDiv').innerHTML;
var result = OtherDiv.match(/SomeRegex/gi);
var select = document.getElementById("field");
for(var i = 0; i < result.length; i++)
{
var option = document.createElement("option");
option.value = i+1;
option.innerHTML = result[i];
select.add(option);
}
}
However, I would like to set up some alternative value for the field to show, if there are no matches to the regex. How would I best achieve that?
Use if condition
window.onload = function onload()
{
var OtherDiv = document.getElementById('OtherDiv').innerHTML;
var result = OtherDiv.match(/SomeRegex/gi);
var select = document.getElementById("field");
if(result.length){
for(var i = 0; i < result.length; i++)
{
var option = document.createElement("option");
option.value = i+1;
option.innerHTML = result[i];
select.add(option);
}
}else{
//add alternative options here
var option = document.createElement("option");
option.innerHTML = "No records found"; //whatever text you want to show
select.add(option);
}
}

Select Specific Elements in Array for Dropdown

I am trying to use JavaScript and jQuery to generate a dropdown list from the values in one particular element of an array.
My array is defined as a variable and looks like this:
var ht_parties = [
{
"id_Group": "41DC3C63-F423-4941-ACF7-63118BD9CE19",
"name": "Ayiti An Aksyon",
"nameAbbreviated": "AAA",
"nameAcronym": "AAA"
},
{
"id_Group": "9AF9E215-0376-460F-B69A-F380F35729CA",
"name": "ACAAU",
"nameAbbreviated": "ACAAU",
"nameAcronym": "ACAAU"
}
]
The code to generate the dropdown is as follows:
var select = document.getElementById("selectNumber");
var options = ht_parties;
for ( var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.text = opt;
el.value = opt;
select.appendChild(el);
};
I want the dropdown to populated with the values of the array element "name". However, this is currently generating a dropdown with the list items as "[object Object]". How do I select only the element "name" from the array and populate the dropdown with it?
you need to specify which key on opts you want to set to the el's text and value
el.text = opt;
el.value = opt;
needs to be something like
el.text = opt.name;
el.value = opt.name;
(or whichever keys you want to set)
use this
var select = document.getElementById("selectNumber");
var options = ht_parties;
for ( var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.text = opt.name;
el.value = opt.name;
select.appendChild(el);
};

Auto populate option tag not working java script

I'm trying to populate number in select - option tag .But my script fills number at only one select tag
HTML :
<div class="form_row">
<label>Week Num</label>
<select class="form_select1" id="weeknum"></select>
<b class="bold1">&nbsp TO &nbsp</b>
<select class="form_select1" id="weeknum1"></select>
</div>
Javascript :
<script>
var select = document.getElementById("weeknum");
var select1 = document.getElementById("weeknum1");
for (var i = 52; i >= 1; i--) {
var option = document.createElement('option');
option.text = option.value = i;
select.add(option, 0);
select1.add(option, 0);
}
</script>
How do i achieve that ?
You can add an element only once to a parent node, so you need to create another option element:
var select = document.getElementById("weeknum");
var select1 = document.getElementById("weeknum1");
for (var i = 52; i >= 1; i--) {
var option = document.createElement('option');
option.text = option.value = i;
var option1 = document.createElement('option');
option1.text = option1.value = i;
select.add(option, 0);
select1.add(option1, 0);
}
Here's the JSFIddle.
Try this ...
var option1 = document.createElement('option');
option1.text = option1.value = i;
select.add(option1, 0);
var option2 = document.createElement('option');
option2.text = option2.value = i;
select1.add(option2, 0);
... creating a distinct "option" for each select list. The created elements cannot be reused.
You need to create a distinct option element for each list. A given DOM element can only be in one place in the DOM.
edit: I see it's already answered... well, my first answer :)
try this:
var select = document.getElementById("weeknum");
var select1 = document.getElementById("weeknum1");
for (var i = 52; i >= 1; i--) {
var option = document.createElement('option');
var option1 = document.createElement('option');
option.text = option.value = option1.text = option1.value = i;
select.add(option, 0);
select1.add(option1, 0);
}

Categories

Resources