Develop Reference

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);
}
}

Why won't the addEventListener trigger on change?

Trying to get the eventlistener to run, i.e. when I select United Kingdom, another selection box will appear to select county (county() function), but for some reason the addEventListener will not call the function, and I can't fathom how to pass the selected country to the county function? Any ideas please.
function countries() {
xmlRequest("countries.xml");
var country_selector = document.createElement("SELECT");
country_selector.id = "cou n tryselection";
document.getElementById("quiz").appendChild(country_selector);
var t = document.getElementById("countryselection");
var c_opt = document.createElement("option");
c_opt.text = "Please select";
c_opt.selected = true;
t.add(c_opt);
c_opt = document.createElement("option");
c_opt.text = "United Kingdom";
c_opt.value = "1";
t.add(c_opt);
document.getElementById("countryselection").addEventListener("change", count y(this.value), false);
var x = xmlDoc.getElementsByTagName("country");
for (i = 0; i < x.length; i++) {
var opt = document.createElement("option");
opt.text = x[i].getElementsByTagName("country_name ")[0].childNodes[0].nodeValue;
t.add(opt);
}
}
function county(Country) {
if (!document.getElementById("countyselection")) {
if (Country === "1") {
xmlRequest("counties.xml");
document.getElementById("quiz").innerHTML += "<select id='countyselection'></select>";
var t = document.getElementById("countyselection");
var y = xmlDoc.getElementsByTagName("county");
for (j = 0; j < y.length; j++)
{
var opt = document.createElement("option");
var txt = y[j].getElementsByTagName("county_name")[0].childNodes[0].nodeValue;
opt.text = txt;
t.add(opt);
}
}
} else {
var f = document.getElementById("countyselection");
document.getElementById("countyselection").parentNode.removeChild(f);
}
}

Because you're calling the function, not referencing it, and you have a space in the function name.
change
document.getElementById("countryselection").addEventListener("change", count y(this.value), false);
to
document.getElementById("countryselection").addEventListener("change", function() {
county(this.value);
}, false);
Also note that things like this
country_selector.id = "cou n tryselection";
is completely invalid, you can't use random text with spaces as an ID

double spit txt file by new line and ";"

I have to douple split my txt file. The txt file looks like
1; Kategorija1
2; Kategorija2
3; Kategorija3
4; ...
I need to put this in select which I have succeeded but I did manage only splitting new line. I need to split both new line and ";" putting text in select and saving id ("1;") in value of select..
function readAll()
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var txtFile = fso.OpenTextFile("kategorije.txt", 1, false, 0);
var fText = txtFile.ReadAll();
txtFile.Close();
fso = null
var array = fText.split("\r\n");
var sel = document.getElementById("dropdown2");
for (var i=0; i<array.length; i++)
{
var opt = document.createElement("option");
opt.innerHTML = array[i];
opt.value = array[i];
sel.appendChild(opt);
}
}

fText.replace(/(\d;)/g,"").split("\n"); //to get the option text ["Kategorija1", "Kategorija", "Kategorija3"]
fText.match(/(\d;)/g) //to get id ["1;", "2;", "3;"]
http://jsfiddle.net/24XSa/

you have to do like this
for (var i=0; i<array.length; i++)
{
var newarray=array[i].split(';')
var opt = document.createElement("option");
opt.innerHTML = newarray[0];
opt.value = newarray[0];
sel.appendChild(opt);
}

read file using ActiveX separate by ; and put in select - option

My goal: i need to read txt file using fso - activeX then separate text by ; and put each separated word in select - option.
so far i got this but aint working
<script>
function readAll() {
var fso = new AcitveXObject("Scripting.FileSystemObject");
var txtFile = fso.OpenTextFile("kategorije.txt", 1, false, 0);
var fText = txtFile.ReadAll();
txtFile.Close();
}
var array = fText.split(";");
var sel = document.getElementById("dropdown2");
for (var i = 0; i < dropdown2.length; i++) {
var opt = document.createElement("option");
opt.innerHTML = fText[i];
opt.value = fText[i];
sel.appendChild[opt];
}
</script>

function readAll() {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var txtFile = fso.OpenTextFile("kategorije.txt", 1, false, 0);
var fText = txtFile.ReadAll();
txtFile.Close();
fso = null
var array = fText.split("\r\n");
var sel = document.getElementById("dropdown2");
for (var i = 0; i < array.length; i++) {
var opt = document.createElement("option");
opt.innerHTML = array[i];
opt.value = array[i];
sel.appendChild(opt);
}
}
my code works now and it look like this