I need help with this dynamically generated dropdown options. What I am trying to accomplish is have three dynamically generated dropdown menus that are dependent on each other. I can get the first dropdown to be created just fine, but my main issue is that I cannot get the onchange to fire when something new is selected.
var dropDown = document.createElement("FIELDSET");
var course_s = document.createElement("SELECT");
course_s.id = "course";
for(var j = 0; j < courseList.length+1; j++){
var course_o = document.createElement("OPTION");
if(j == 0){
course_o.value = "NONE";
course_o.innerHTML = "NONE";
}else{
course_o.value = courseList[j-1];
course_o.innerHTML = courseTitle[j-1]+" "+courseNumber[j-1];
}
course_s.appendChild(course_o);
}
var module_s = document.createElement("SELECT");
module_s.id = "module";
var module_o = document.createElement("OPTION");
module_o.value = "NONE";
module_o.innerHTML = "NONE";
module_s.appendChild(module_o);
var segment_s = document.createElement("SELECT");
segment_s.id = "segment";
var segment_o = document.createElement("OPTION");
segment_o.value = "NONE";
segment_o.innerHTML = "NONE";
segment_s.appendChild(segment_o);
Module and segment options are set when course has been changed.
Related
var arr = {'ukraine' : ['Киев', 'Одесса', 'Харьков'], 'russia' : ['Петербург', "Москва", "Архангельск"], 'belarus' : ['Минск', 'Витебск', 'Гомель']};
var countries = document.getElementById('country');
var cities = document.getElementById('cities');
cities.style.visibility = 'hidden';
countries.addEventListener('change', func);
function func(){
var temp = countries.value;
var city = arr[temp];
if(cities.options != undefined){
for(var i = 0; i < cities.options.length; i++){
alert(i);
cities.removeChild(cities.options[i]);
}
}
for(var i = 0; i < city.length; i++){
var option = document.createElement('option');
option.innerHTML = city[i];
cities.appendChild(option);
}
cities.style.visibility = 'visible';
}
These russian words mean cities. What I'm trying to do is to display second select depending on the option I choose in the first one. But when I'm trying to delete all old options of cities select, it just deletes the first option, even though I put it in the loop? Why does removeChild only work for the first child?
Every time you click on "Add grade" button, I want the next things that will appear to be in the line below that one.
And when I click on the button "-", I want everything in that line to be erased.
delete
nextline
Just try the code below and you'll see what I'm talking about.
input[type="number"]{
color : transparent;
text-shadow : 0 0 0 #000;
}
input[type="number"]:focus{
outline : none;
}
</style>
<button type="button" id="dugme1" onclick="javascript:dodajocenu();"> Add grade</button>
<br><br>
<div id="stranica">
</div>
<script>
var ocena = 0;
function removeElement(obrisi) {
var dugme = obrisi.target;
var input = dugme.previousSibling;
var brisi = dugme.parentElement;
brisi.removeChild(dugme);
brisi.removeChild(input);
}
function dodajocenu() {
ocena++;
//create textbox
var input = document.createElement('input');
input.type = "number";
input.setAttribute("max",5);
input.setAttribute("min",1);
var myParent = document.body;
//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select list
var selectList = document.createElement('select');
selectList.id = "mySelect";
myParent.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement('option');
option.value = array[i];
option.text = array[i];
selectList.appendChild(option);
}
//create remove button
var remove = document.createElement('button');
remove.onclick = function(obrisiocenu) {
removeElement(obrisiocenu);
}
remove.setAttribute("type", "dugme");
remove.innerHTML = "-";
stranica.appendChild(input);
stranica.appendChild(selectList);
stranica.appendChild(remove);
}
</script>```
Try to run the following code, let me know if this is what you want to do.
var ocena = 0;
var stranica = document.querySelector("#stranica")
function removeElement(obrisi) {
var dugme = obrisi.target;
stranica.removeChild(dugme.parentElement)
}
function dodajocenu() {
ocena++;
//create textbox
var input = document.createElement('input');
input.type = "number";
input.setAttribute("max",5);
input.setAttribute("min",1);
var myParent = document.body;
//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select list
var selectList = document.createElement('select');
selectList.id = "mySelect";
myParent.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement('option');
option.value = array[i];
option.text = array[i];
selectList.appendChild(option);
}
//create remove button
var remove = document.createElement('button');
remove.onclick = function(obrisiocenu) {
removeElement(obrisiocenu);
}
remove.setAttribute("type", "dugme");
remove.innerHTML = "-";
var item = document.createElement('div')
item.classList.add("item")
item.appendChild(input);
item.appendChild(selectList);
item.appendChild(remove);
stranica.appendChild(item)
}
input[type="number"]{
color : transparent;
text-shadow : 0 0 0 #000;
}
input[type="number"]:focus{
outline : none;
}
<button type="button" id="dugme1" onclick="javascript:dodajocenu();"> Add grade</button>
<br><br>
<div id="stranica">
</div>
I have multiple dropdowns on my site and I am trying to alter the code so that when the chosen product is clicked again, the dropdown resets (i.e. exits the dropdown). See here in the middle of the page: https://www.arieliandcompany.com/make-a-career-transition.html
I am not managing to find a solution that retains the functionality of changing between products on dropdown, or being able to enter the dropdown again after exiting.
I tried adding this line, which closed the dropdown, but it messed up other elements of the dropdown functionality as mentioned above:
chosenProd.onclick = function(){showIndProd(0);};
Would anyone be able to help??
function showIndProd(prodNum){
var indProgs = document.getElementsByClassName('indProg');
var indProgImgs = document.getElementsByClassName('indProgImg');
var indProgPs = document.getElementsByClassName('indProgP');
var progMores = document.getElementsByClassName('indProdMore');
var chosenProd = document.getElementById(["indProg"+prodNum]);
var chosenProdMore = document.getElementById(["indProdMore0"+prodNum]);
var closeBut = document.getElementById('closeProdsMore');
for (i = 0; i < indProgImgs.length; i++) {
if (prodNum != 0){
indProgs[i].style.opacity = "0.3";
indProgImgs[i].style.height = "300px";
indProgs[i].style.filter = "grayscale(100%)";
progMores[i].style.display = "none";
chosenProd.style.opacity = "1";
chosenProd.style.filter = "none";
chosenProdMore.style.display = "block";
closeBut.style.display = "inline-block";
closeBut.style.position = "relative";
chosenProd.onclick = function(){showIndProd(0);};
} else { //close all and restore to default
indProgs[i].style.opacity = "1";
indProgImgs[i].style.height = "550px";
indProgPs[i].style.display = "table";
indProgs[i].style.filter = "grayscale(0%)";
progMores[i].style.display = "none";
closeBut.style.display = "none";
}
}
}
Seems the issue is with these two line
var chosenProd = document.getElementById(["indProg"+prodNum]);
var chosenProdMore = document.getElementById(["indProdMore0"+prodNum]);
Instead of passing string you are passing array
I'm doing this on the jsp page of another application. I need to populate values on combobox based on another combo box. I've seen several posts explaining this but can't make it to work for myself.
Here's what I tried.
<script type="text/javascript">
function customChangefunction(){
var target = window.document.getElementsByName("resultCombo");
var src = window.document.getElementById("sampleCombo");
var strUser = src.options[src.selectedIndex].value;
alert(strUser);
var colours = new Array('Black', 'White', 'Blue');
var shapes = new Array('Square', 'Circle', 'Triangle');
var names = new Array('John', 'David', 'Sarah');
switch (strUser) {
case 'one':
target.options.length = 0;
for (i = 0; i < colours.length; i++) {
createOption(target, colours[i], colours[i]);
}
break;
case 'two':
target.options.length = 0;
for (i = 0; i < shapes.length; i++) {
createOption(target, shapes[i], shapes[i]);
}
break;
case 'three':
target.options.length = 0;
for (i = 0; i < names.length; i++) {
createOption(target, names[i], names[i]);
}
break;
default:
target.options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement("OPTION");
opt.value = value;
opt.text = text;
ddl.options.add(opt);
opt.appendChild(text);
document.getElementById(ddl).appendChild(opt);
}
The above code is not working.I have to do this without using jquery.
My actual requirement is
if Combo1 is India then Combo2 should show Chennai,Delhi,Mumbai
if Combo1 is USA then Combo2 should show New York,CA,etc..
I have one more question. Suppose that Combo2 is already having some values does this replace those with these values.I would like to do this way
Please comment on this before you mark this question as duplicate or closing it.
document.getElementById("food").onchange = function(Event){
var contents = document.getElementById("contents");
contents.innerHTML = "";
for(var i in data[this.value]){
var option = document.createElement("option");
option.setAttribute('value',data[this.value][i]);
option.text = data[this.value][i];
contents.appendChild(option);
}
var expect_data = Event.target.value == "Fruits" ? "Vegetables" : "Fruits";
for(var i in data[expect_data]){
var option = document.createElement("option");
option.setAttribute('value',data[expect_data][i]);
option.text = data[expect_data][i];
contents.appendChild(option);
}
}
function addrow() {
document.getElementById("myTableData").style.display="block";
/*displaying div on click of button abc*/
var el = document.createElement('input');
el.type = 'text';
el.name = 'kname';
/*creating name field*/
var el_r = document.createElement('input');
el_r.type = 'radio';
el_r.name = 'gender';
el_r.value ='FEMALE';
el_r.id = "rad1";
el_r.defaultChecked = true;
/* creating radio button for gender field */
var el_r2 = document.createElement('input');
el_r2.type = 'radio';
el_r2.name = 'gender';
el_r2.value ='MALE';
el_r2.id = "rad2";
/* creating radio button for gender field */
var obj1 = document.createTextNode("Female");
var obj2 = document.createTextNode("Male");
var objLabel = document.createElement("label");
objLabel.htmlFor = el_r.id;
objLabel.appendChild(el_r);
objLabel.appendChild(obj1);
var objLabel2 = document.createElement("label");
objLabel2.htmlFor = el_r2.id;
objLabel2.appendChild(el_r2);
objLabel2.appendChild(obj2);
/* creating drop down for date field */
var el_s = document.createElement('select');
el_s.onchange = function(){
var r = el_s.options[el_s.selectedIndex].value;
alert("selected date"+r); //cheking the selected date value;
}
for(var i=0;i<32;i++)
{
var j = i;
j = document.createElement('option');
j.text=i;
j.name="day";
j.value=j;
el_s.appendChild(j);
}
var month = new Array("January","Februray","March","April","May","June","July","August","September","October","November","December");
var el_sm = document.createElement('select');
for(var i=0;i<month.length;i++)
{
var j = i;
j = document.createElement('option');
j.text=month[i];
j.name="month";
j.value=month[i];
el_sm.appendChild(j);
}
var el_sy = document.createElement('select');
for(var i=2013;i>1950;i--)
{
var j = i;
j = document.createElement('option');
j.text=i;
j.name="year";
j.value=j;
el_sy.appendChild(j);
}
var table = document.getElementById("myTableData");
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var tr = document.createElement('TR');
tableBody.appendChild(tr);
var td = document.createElement('TD');
td.width='175';
td.appendChild(el);
tr.appendChild(td);
var td = document.createElement('TD');
td.width='245';
td.appendChild(objLabel);
td.appendChild(objLabel2);
tr.appendChild(td);
var td = document.createElement('TD');
td.width='245';
td.appendChild(el_s);
td.appendChild(el_sm);
td.appendChild(el_sy);
tr.appendChild(td);
myTableData.appendChild(table);
}
</script>
<input type="submit" value="submit"/>
i am dynamically generating form in HTML with the help of javascript on button click named abc. my code is working fine , when i am inserting values ,but when i am posting this form with the help of button the values name and gender is showing in address bar but the DATE ( element name"el_s") selected values is not showing in addressbar.
there are 2 buttons in first displays the div in which form is shown and next one is submit button of form
You must set el_s.name='date' in order for the data to be automatically posted.