Create a new dropdown with javascript - javascript

I am trying to create a dropdown after I choose an option in an original dropdown.
This is the HTML code:
<br>
<select id ="select-container" onchange="addSelect('select-container');">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<br>
This is the javascript.
function categorygenerate() {
//for testing purposes
var categoryarray = new Array(),
i;
for (i = 0; i < 3; i++) {
categoryarray[i] = Math.random();
}
return categoryarray;
}
function addSelect(divname) {
var newDiv = document.createElement('div');
var html = '<select>',
dates = categorygenerate(),
i;
for (i = 0; i < dates.length; i++) {
html += "<option value='" + dates[i] + "'>" + dates[i] + "</option>";
}
html += '</select>';
newDiv.innerHTML = html;
document.getElementById(divname).appendChild(newDiv);
console.log($("#" + divname).html());
console.log(newDiv);
}
The debugger mode shows me no error.

It is because you are trying to append your code in the "original select": look at the id of your select.
You have to add a div tag with the id="select-container" and remove it from the "original select"
Here is a working snippet:
function categorygenerate() {
//for testing purposes
var categoryarray = new Array(),
i;
for (i = 0; i < 3; i++) {
categoryarray[i] = Math.random();
}
return categoryarray;
}
function addSelect(divname) {
var newDiv = document.createElement('div');
var html = '<select>',
dates = categorygenerate(),
i;
for (i = 0; i < dates.length; i++) {
html += "<option value='" + dates[i] + "'>" + dates[i] + "</option>";
}
html += '</select>';
newDiv.innerHTML = html;
document.getElementById(divname).appendChild(newDiv);
console.log($("#" + divname).html());
console.log(newDiv);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<select onchange="addSelect('select-container');">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<br>
<div id="select-container"></div>

Put your select in a div with the id select-container. Ofcourse, give your select an other ID. Then your code should work. It's because you try to append a new select to the original one in your HTML.
https://jsfiddle.net/b248a4k1/

Related

HTML code not loading the data in list box

I am creating two combo boxes the first one gets loaded initially and up on selecting the text in the combo the second combo box should get filtered. The issue is combo box is not getting loaded.
<html> <head>
<title> text conversion </title> <script type="text/javascript">
function PrepopulateProductName() { alert("Hello! I am an alert box!!");
var selectHTML = "";
var DEV = ["GTXD", "SFGD", "ITXD", "ETXD","CTXD"];
var SYS = ["GTXS", "ITXS", "ETXS", "CTXS"];
var ACC = ["GTXA", "ITXA", "ETXA", "CTXA", "SFGA"];
alert("Hello! I am an alert box!!");
if (document.getElementById("selProductName").value == "DEV") {
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; i++) {
document.getElementById('category').options.remove(i);
}
for (var i = 0; i < DEV.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + DEV[i] + "'>" + DEV[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
PrepopulateProductName();
</script> </head> <body>
Product Name: <select id="selProductName" name="selProductName"
onchange="changeProductName(this.value);"> <option>--Choose Product
Name--</option> </select>
</body> </html>
There were few issues in your code:
You didn't define the category select box
Called an undefined function changeProductName()
This is what you can do:
With the onchange attribute, call the PrepopulateProductName() function. Then, it will check for the selected option and populate the category select box with the values defined.
Example:
function PrepopulateProductName() {
//alert("Hello! I am an alert box!!");
var selectHTML = "";
var DEV = ["GTXD", "SFGD", "ITXD", "ETXD","CTXD"];
var SYS = ["GTXS", "ITXS", "ETXS", "CTXS"];
var ACC = ["GTXA", "ITXA", "ETXA", "CTXA", "SFGA"];
//alert("Hello! I am an alert box!!");
if (document.getElementById("selProductName").value == "DEV") {
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; i++) {
document.getElementById('category').options.remove(i);
}
for (var i = 0; i < DEV.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + DEV[i] + "'>" + DEV[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
}
<html> <head>
<title> text conversion </title>
</head>
<body>
Product Name: <select id="selProductName" name="selProductName"
onchange="PrepopulateProductName();"> <option>--Choose Product
Name--</option> <option value="DEV">DEV</option> </select>
<select id="category" name="category"> </select>
</body> </html>

How to display selected file names before uploading multiple files in javascript

How to use table instead of list for alignment. Also ones we click the cancel button the file list need to be deleted from list.
updateList = function () {
var input = document.getElementById('fileUploader');
var output = document.getElementById('divFiles');
output.innerHTML = '<ul style="list-style-type:none">';
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += '<li>' + input.files.item(i).name + ' <button>X</button></li> ';
}
output image for the above code
updateList = function () {
var input = document.getElementById('fileUploader');
var output = document.getElementById('divFiles');var HTML = "<table>";
for (var i = 0; i < input.files.length; ++i)
{
HTML += "<tr><td>" + input.files.item(i).name + "</td><td> <button>X</button></td></tr>";
}
HTML += "</table>";
output.innerHTML = HTML;
}

How do I apply code to a dynamically created element

The following code works only if the table is already present in the document upon page load. I however want it to apply on a dynamically created table.
Can this be done?
var colNumber=22
for (var i=0; i<colNumber; i++)
{
var thWidth=$("#tbl").find("th:eq("+i+")").width();
var tdWidth=$("#tbl").find("td:eq("+i+")").width();
if (thWidth<tdWidth)
$("#tbl").find("th:eq("+i+")").width(tdWidth);
else
$("#tbl").find("td:eq("+i+")").width(thWidth);
}
The table is created in the following way:
function loadFile(event){
alasql('SELECT * FROM FILE(?,{headers:false})',[event],function(data){
var keys = [];
for (var i = 0; i < data.length; i++) {
for (var categoryid in data[i]) {
var category = data[i][categoryid];
keys.push(categoryid);
}
}
keysConverted = keys.map(foo);
var vMin = Math.min.apply(null, keysConverted);
var vMax = Math.max.apply(null, keysConverted);
var start = vMin-1
var ColNeeded = vMax - vMin+1;
var arrExcel2Table = '<table id="tbl">';
for (var i = 0; i < data.length; i++){
arrExcel2Table = arrExcel2Table + '<tr>';
for (var j = 0; j < ColNeeded; j++){
cellValue = data[i][number2Letter(j+start)];
if (typeof cellValue === "undefined"){
cellValue = '';
}
arrExcel2Table = arrExcel2Table + '<td>' + cellValue + '</td>';
}
arrExcel2Table = arrExcel2Table + '</tr>';
}
arrExcel2Table = arrExcel2Table + '</table>';
document.getElementById('excel_table').innerHTML = arrExcel2Table;
});
}
Create a function you want to run and add an event from the dynamic element. For example
arrExcel2Table = arrExcel2Table + '<td>' + cellValue + '</td>';
can be replaced by
arrExcel2Table = arrExcel2Table + '<td onclick="myFunction();">' + cellValue + '</td>';
Above code will call the function you created
myFunction() {
alert();
}
Just create your table, then apply whatever code you want to it :
$('#excel_table').html(arrExcel2Table);
adjustWidth()
function adjustWidth(){
var $tbl = $("#tbl"); // And cache your jQuery objects!! Massive performance boost
for (var i=0; i<colNumber; i++)
{
var $th = $tbl.find("th:eq("+i+")"),
$td = $tbl.find("td:eq("+i+")"),
thWidth = $th.width(),
tdWidth = $td.width();
if (thWidth<tdWidth)
$th.width(tdWidth);
else
$td.width(thWidth);
}
}

Javascript: Javascript ignores the elements generated by itself

I have this javascript function that generates new selects with IDs:
function generateChild(root, categories){
++counter;
var appendid = "id='selectCategory_".concat(counter);
var coma = "'";
var mayorque = "'>";
var appendcoma = appendid.concat(coma);
var select ="<div class='selectContainer'".concat(appendcoma);
var close = "><select ";
var cerrar = select.concat(close);
var appendidselect = cerrar.concat(appendid);
var html = appendidselect.concat(mayorque);
for (var i = 0; i < categories.length; i++) {
html += "<option value='" + categories[i] + "'>" + categories[i] + "</option>";
}
html += '</select></div>';
// ---------------------------
// ---------------------------
// create an element from the html string
// ---------------------------
var tplt = root.createElement('template');
tplt.innerHTML = html;
var el = tplt.content.firstChild;
// ---------------------------
// ---------------------------
// attach the change handler
// ---------------------------
el.firstChild.addEventListener("change", handle_onChange);
// ---------------------------
return el;
}
}
And then this function to search for the last dropdown that didn't have a blank space on it, and save it in a hidden input for later use:
if(this.value == ' '){
for (var i = counter - 1 ; i >= 0 ; --i){
var string = i.toString();
var selectid = "selectCategory_".concat(string);
if(document.getElementById(selectid)){
document.getElementById("category").value = document.getElementById(selectid).value;
break;
}
}
}
else{
var lastselectedvalue = this.value;
document.getElementById("category").value = this.value;
}
This works well with the first dropdown, which is already in the code:
<input type ="hidden" name="category" id = "category" value="">
<div id="category0" class="selectContainer">
<select id="selectCategory_0">
<option>something</option>
<option>something else</option>
</select>
</div>
But never works with the other dropdowns, it always returns undefined.

display my dropdown box in a specific area

Ok here's what I am doing. Based on some dropdown value I am craeting another dropdown value.
Is it possible to display that dropdown in some specific area as I wish based on my existing code.
if (SelectedIndex == 2 || SelectedIndex == 5 || SelectedIndex == 7) {
$("#DomContainer").remove();
var MainContainer = document.createElement("Div");
MainContainer.id = "DomContainer";
$("body").append(MainContainer);
var Options = new Array();
for(var i=1;i<=28;i++){
Options.push(i);
}
AddDropDown(Options);
}
function AddDropDown(Options) {
var selectHTML = "<label>Day:</label> ";
selectHTML += "<select>";
for (i = 0; i < Options.length; i = i + 1) {
selectHTML += "<option value='" + Options[i] + "'>" + Options[i] + "</option>";
}
selectHTML += "</select>";
document.getElementById("DomContainer").innerHTML = selectHTML;
}
For example <div id="new_drop">//Display the drop down here </div>
Simply add a second parameter to AddDropDown for passing the ID of the container to which you want to insert your dropdown list:
function AddDropDown(Options, containerId) {
...
document.getElementById(containerId).innerHTML = selectHTML;
Then call it like this:
AddDropDown(Options, "new_drop");
(if I understand you correctly)
No need to remove and append elements from the DOM, just replace the existing element contents ... here's a simplified version.
// if "SelectedIndex" is one of the values in the array provided
if ($.inArray(SelectedIndex, [2,5,7])) {
$("#DomContainer").html("<label>Day:</label> "+inject_dropdown(28));
}
// Creates and returns a new drop-down based on the "length" provided
function inject_dropdown(length){
var selectHTML = "<select>";
for( i=1; i<=length; i++ ){
selectHTML += "<option value='" + i + "'>" + i + "</option>"
}
selectHTML += "</select>"
return selectHTML;
}
Replace the $('#DomContainer') selector with whatever selector identifies the place you want the new drop-down to appear.

Categories