I have a value in textbox as '203' in that '0' should be increment every time as [1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,.......Z] so next increment value should be '213,223,233,243,253,263,273,283,293,2A3,2B3,2C3,2D3,2E3....'
So I created a dropdown box 'revision' where the values as[1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,.......Z]
using sustr I strip the '0' position and I got value in variable 'value1'.
var value1=item.substr(0,1)
var arr = document.getElementsByName('revision')
var x = arr[0].selectedIndex
How do I compare the value1 in arr[0].length and increment to next as of dropdown data?
Try
var currentIndex = 0;
function createOption(){
var select = document.getElementById("revision");
for(var i = 1; i <= 9 ; i++){
var opt = document.createElement("option");
opt.value = i;
opt.innerHTML = i;
select.appendChild(opt);
}
for(var i = 65; i <= 90; i++){
var opt = document.createElement("option");
opt.value = String.fromCharCode(i);
opt.innerHTML = String.fromCharCode(i);
select.appendChild(opt);
}
}
createOption();
document.getElementById("btn").onclick = function(){
currentIndex ++;
var txt = document.getElementById("txt");
var select = document.getElementById("revision");
var lastChar = txt.value.substr(txt.value.length - 1, 1);
var firstChar = txt.value.substr(0, 1);
select.value = select.childNodes[currentIndex].value;
txt.value = firstChar + select.childNodes[currentIndex].value + lastChar;
};
Here's DEMO
Related
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);
I want to fill a select with and array values. I don't see why my code doesnt work. I am a beginner.This is my script
var mes = new Array();
for(i = 0; i < 12; i++){
mes[i] = i;
}
var sel = document.getElementById('mes');
for(var i = 0; i < mes.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = mes[i];
opt.value = mes[i];
sel.appendChild(opt);
}
And this is the html select:
<select name="mes" id="mes"></select>
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
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);
}
I am extremely new to JavaScript. I am trying to control the options inside one listbox (called Aggregator) using the selected value of another (called Product). Below is the code I have written so far.
Now when I load the HTML page the code I have written to control the text boxes (using txt, txt2, txt3) does not work either now.
Javascript
function pGo() {
var x = document.getElementById("Product").value;
var txt = "";
var txt2 = "";
var txt3 = "";
var list = document.getElementById("Aggregator");
var aggrs = new Array();
aggrs[0] = "h";
aggrs[1] = "e";
aggrs[2] = "l";
aggrs[3] = "l";
aggrs[4] = "l";
aggrs[5] = "o";
aggrs[6] = "o";
var length = aggrs.length;
var element = null;
if (x == "HII") {
txt = "Full ";
txt2 = "/";
txt3 = "/";
for (var i = 0; i < 5; i++)){
element = aggrs[i]
var opt = document.createElement("option");
opt.innerText = element;
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
}
else if (x == "DLG"){
txt = "Full";
txt2 = "/T";
txt3 = "/responses/";
for (var i = 0; i < 1; i++)){
element = aggrs[i]
var opt = document.createElement("option");
opt.innerText = element;
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
}
else if (x == "TBB"){
txt = "Full ";
txt2 = "/Trams";
txt3 = "/respo";
for (var i = 0; i < 1; i++)){
element = aggrs[i]
var opt = document.createElement("option");
opt.innerText = element;
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
element = aggrs[6]
var opt = document.createElement("option");
opt.innerText = element;
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
form.elements.calcType.value = txt;
form.elements.transform.value = txt2;
form.elements.calcResponse.value = txt3;
}
HTML
product
<select id="Product" onchange = "pGo()">
<option>HII</option>
<option>DLG</option>
<option>TBB</option>
</select><div>
<script type = "text/javascript">
aggregator
<select name = "Aggregator">
</select><br/><br/>
Other text boxes emitted
I need the Aggregator to display certain values from the aggrs list depending on the value selected in the Product select:
HII : [0,1,2,3,4,5]
DLG : [0,1]
TBB : [0,1,6]
Don't go learning jQuery if you're having trouble with basic JavaScript. You'll have worse problems with jQuery.
For a start, you're asking for the ID "Aggregator":
var list = document.getElementById("Aggregator");
when you don't have an object with the ID "Aggregator":
<select name = "Aggregator"></select>
First off, there are a LOT of syntax errors in your code. I have added comments where I made those changes.
There was no id element "Aggregator" so I changed your markup:
product
<select id="Product" onchange="pGo();">
<option>Pick one</option>
<option>HII</option>
<option>DLG</option>
<option>TBB</option>
</select>
<div>aggregator
<select id="Aggregator" name="Aggregator"></select>
<br/>
<br/>
</div>
You had a lot of duplicate code (still is some) and other issues (see comments)
// function to remove duplicate code
function addOptions(list, aggrs, limit) {
var i = 0;
// fix issue where option list did not empty on new select
for (; i < list.length; i++) {
list.remove(i);
}
for (i = 0; i < limit; i++) { // fix extra ")"
var opt = document.createElement("option");
element = aggrs[i]; //missing semicolon
opt.text = element; // use standard form not innerHtml
opt.value = element; // you had no value
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
}
function pGo() {
var x = document.getElementById("Product").value;
var txt = "";
var txt2 = "";
var txt3 = "";
var list = document.getElementById("Aggregator");
var aggrs = ["h", "e", "l", "l", "l", "o", "o"]; //simpler array
var length = aggrs.length;
var element = null;
if (x == "HII") {
txt = "Full ";
txt2 = "/";
txt3 = "/";
addOptions(list, aggrs, 5);
} else if (x == "DLG") {
txt = "Full";
txt2 = "/T";
txt3 = "/responses/";
addOptions(list, aggrs, 1);
} else if (x == "TBB") {
txt = "Full ";
txt2 = "/Trams";
txt3 = "/respo";
addOptions(list, aggrs, 1);
// strange additional option added
var oneAggr = [];
oneAggr[0] = aggrs[6];
addOptions(list, oneAggr, 1);
}
// form.elements.calcType.value = txt; // commented out due to not existing
// form.elements.transform.value = txt2;
// form.elements.calcResponse.value = txt3;
}
This is NOT really pretty (OK it is somewhat strange the options you set) even yet but at least it should work.
Sample to work with: http://jsfiddle.net/Qc4yD/