I have a button that when pushed, it creates a new row. That row consists of selects,texts, and cells. My select box, when created has a default option 't'. How do I list multiple options without using html?
I tried to create a new textnode and when I do the appendChild for both options, I get them both on the same line. I need the second variable 'u' to be an entirely new option. Any help is most appreciated.
HTML
<button onclick="AddRow()"></button>
Javascript
function addRow(){
var optionObject = {};
var table=document.getElementById('table2'),tr,input,row,cell
tr=document.createElement('tr');
tr.setAttribute("class","rows");
tr.id = "AddedRow";
field = document.createElement("select");// this is where the select box is
var z = document.createElement("option"); //this is to create an option for the select box
z.setAttribute("value", "Choose"); // this is to give it a default value
var t = document.createTextNode("Select a Current Job");// this is to give it a default field name
var u = document.createTextNode("Select yoyo");// this is to give it a default field name
z.appendChild(t);// append the default field name to the option
z.appendChild(u);// append the default field name to the option
field.appendChild(z);// append the option to the select box
field.setAttribute("id","jobSelector");
//field.setAttribute("class","celltimes5a");
field.setAttribute("class","celltimesSelect");
var jobCol=document.createElement('td');
jobCol.setAttribute("class","celltimes5c");
tr.appendChild(field);
tr.appendChild(jobCol);
td=document.createElement('td');
td.setAttribute("class",'celltimes4c');
td.id = "row14total";
tr.appendChild(td);
table.appendChild(tr);
}
needed to create a another new option and append it as well
var z = document.createElement("option"); //this is to create an option for the select box
z.setAttribute("value", "Choose"); // this is to give it a default value
var w = document.createElement("option"); //this is to create an option for the select box
w.setAttribute("value", "Choose"); // this is to give it a default value
var t = document.createTextNode("Select a Current Job");// this is to give it a default field name
var u = document.createTextNode("Select yoyo");// this is to give it a default field name
z.appendChild(t);// append the default field name to the option
w.appendChild(u);// append the default field name to the option
field.appendChild(z);// append the option to the select box
field.appendChild(w);// append the option to the select box
Related
I have a programm where I want to have a dropdown list called DropDownGamer which i've made:
<select disabled="disabled" id="DropDownGamer">
<option disabled selected value>Valige Youtuber</option>
<option value="Terminats">Terminats</option>
<option value="HDTanel">HDTanel</option>
<option value="DeniedNetwork">DeniedNetwork</option>
<option value="Shroud">Shroud</option>
</select>
Now I have a checkbox that enables the dropdown list so you can choose from it. I want to make something like this: If you choose one of the items from the dropdown list, lets say you choose Terminats - the first item in the list, And press a button called ShowInfo, I want there to show up text below the button, about that item, something like this: Terminats has xxx subs and xxx views. I want to have custom text for each item.
I thought about something like this:
<input id="Button1" onclick="showInfo()" type="button" value="Show Info." />
function showInfo()
{
if (document.getElementById("Terminats"))
{
}
else if (document.getElementById("HDTanel"))
{
}
}
But I dont think that would work or atleast, I can't seem to get it to work.
Thanks!
one option would be to use a switch statement:
function showInfo() {
var selectElement = document.getElementById("DropDownGamer");
switch (selectElement.value) {
case 'Terminants':
// code to display text for terminants
break;
case 'HDTanel':
// code to display text for hdtanel
break;
etc...
}
}
best option would be to create an element after your button, let's say
<p id="description"></p>
and then something like
var description = document.getElementById('description');
description.removeChild(description.childNodes[0]);
var descriptionText = document.createTextNode("your description");
description.appendChild(descriptionText);
inside the respective case statement (you first target your element, then empty it if there is text inside, then create new text node and append it).
so full code would be:
var description = document.getElementById('description'),
selectElement = document.getElementById('DropDownGamer');
function showInfo() {
switch (selectElement.value) {
case 'Terminants':
description.removeChild(description.childNodes[0]);
var descriptionText = document.createTextNode("your description for terminants");
description.appendChild(descriptionText);
break;
case 'HDTanel':
description.removeChild(description.childNodes[0]);
var descriptionText = document.createTextNode("your description for hdtanel");
description.appendChild(descriptionText);
break;
etc...
}
}
I would put data attributes on each select item, and then use the function to grab that data. You could put subs and views right on the selected item with data- attributes like this
<option selected value="Valige Youtuber" data-subs="2" data-views="23">Valige Youtuber</option>
Then in your showInfo() function you could grab the select list, and find the datavalue
function showInfo() {
var dropdown = document.getElementById('DropDownGamer');
var dataset = dropdown[dropdown.selectedIndex].dataset;
var subs = dataset.subs;
var views = dataset.views;
}
Or even put the whole custom string into a data attribute like this
<option selected value="Valige Youtuber" data-customString="my custom statement">Valige Youtuber</option>
I have many forms with two dropdown options name and value and I want option of name to be selected be a variable from an array, something like this.
for (i = 0;i<noOfElements;i++)
{
var resultHtml = theModule.getHtml("rowformtemplate", {});
//load html of form with fields **name** and **value** as dropdown
$(section).append(resultHtml);
//append html to a div
var optValue = namearray[i];
//from list of optons this value should be selected
var form = $(section).find(".row-template");
//find all forms in the section
var row= form[form.length-1];
//select latest form
//How to select name field "name" of current row and set it to be optvalue which is a variaable something like this. but it selects name field of all form and sets it to optValue
$("select[name^='name'] option[value=" + optValue + "]").attr("selected","selected");
}
In your final jquery selector, you are looking through the full html document instead of the latest form.
Try the following
$(row).find("select[name='name'] option[value='" + optValue + "']").attr("selected","selected");
or if using latest jquery
$(row).find("select[name='name'] option[value='" + optValue + "']").prop("selected",true);
Also check
How do I select item with class within a DIV in JQuery
How do you select a particular option in a SELECT element in jQuery?
I am trying to add new options in a dropdown based on the other dropdown value.
the new added option doesnt appear in the dropdown on my custom webkit browser.
When I try to debug it the values are present in the dropdown, just it doesnt show up in the front end.
I have attached the code but its working in jsbin :(
When I click the empty dropdown and then click New button value doesnt show up but if I dont click the empty dropdown and click new button directly values appear normally.
https://jsbin.com/kikicuhabo/1/edit?html,css,js,output
It is a good practice to write HTML in lower case, and to close the tags.
If you want to use jQuery I recommend to select elements alway with the "$('')" instead of mixing with the "document. ... "
Since yours it is a custom browser I would try a solution in Vanilla JS.
function AddToCB(p_oCB, p_sText) {
var oSelect = document.querySelector(p_oCB);
var iNewLast = oSelect.length;
var sDisplay = p_sText + (iNewLast + 1);
var oNewItem = document.createElement('option');
oNewItem.innerHTML = sDisplay;
oNewItem.setAttribute('value', sDisplay)
oSelect.appendChild(oNewItem);
oSelect.selectedIndex = iNewLast;
return iNewLast;
}
function AddOption() {
var select = document.querySelector("#cmb");
var text = select.options[select.selectedIndex].value;
AddToCB('#list', text);
}
<select name="cmbColor" id="cmb">
<option>AA</option>
<option>BB</option>
<option>CC</option>
</select>
<input type="button" class="float-right" VALUE="New" onClick="AddOption()" >
<select name="list" id="list">
</select>
This question already has answers here:
Add item to dropdown list in HTML using JavaScript
(5 answers)
Closed 8 years ago.
i need to populate year in second dropdownlist on selecting value from first dropdown.And the year range is between 1900 to 2050
can anyone help?
First, create a select element. So in your HTML document,
<select id="year">
<option value="-1"> </option>
</select>
There is an empty option if the user doesn't want to fill it in. Feel free to give it an another value or another text like "please choose a year". The reason behind it is that if the user has disabled javascript, the years won't be appended. You will end with an empty select box.
Then use a script to add more option elements to fill it with years.
// get selectbox
var selectBox = document.getElementById('year');
// loop through years
for (var i = 2050; i >= 1900; i--) {
// create option element
var option = document.createElement('option');
// add value and text name
option.value = i;
option.innerHTML = i;
// add the option element to the selectbox
selectBox.appendChild(option);
}
Please ensure that the parameter at getElementById has the same id as the HTML select element.
A needless One Liner: (DEMO)
$((new Array(150) + "").split(",").map(function (i,j) {return $("<option>").append(j + 1900)[0];})).appendTo($("select"));
Expanded:
var option = function (i,j) {return $("<option>").append(j + 1900);};
var options = (new Array(150) + "").split(",").map(option);
$("select").append(options);
I have created jsfiddle Please look
I have attached change event to first combo box and according to its value populating 2nd combo value.
You can do whatever you want inside function
$("#s1").on("change", function(){
var value = $(":selected", this).val();
if(value == 'a'){
$("#s2").val('2000');
}else{
$("#s2").val('2010');
}
})
Just create a for loop that starts at 1900 and ends at 2050 (or the other side), and append options to the dropdownlist:
<select id="myDDL"></select>
var i=0;
for(i=1900;i<=2500;i++)
{
$("#myDDL").append("<option value='"+i+"'>"+i+"</option>")
}
I am using javascript to programmatically add options to an html select box. When I add a new option, I am setting that option's .selected property to true so that it is the one that appears in the select box. When I do this, the innerHTML does not change to the new value, but when I click in the select box, I see the option I wanted selected has a checkmark next to it, indicating it is selected. Why isn't the value shown the correct value?
Here is my function that populates the select box options:
function printCartList(newCart){
// Check if newCart is null
newCart = newCart ? newCart : "a_new_cart_was_not_provided_12345abcde";
// set carts object from cookie if it exists, otherwise create a new one
if($.cookie("carts") != null){
carts = JSON.parse($.cookie("carts"));
}
else{
selectOption = new Object();
selectOption.value = "newuniquecartid12345abcde";
selectOption.html = "***New Cart***";
carts = new Object();
carts.size = 1;
carts.option = new Array();
carts.option[0] = selectOption;
}
// Get the select element
var select = document.getElementById("select_cart");
// Get the length of the select options list
var length = select.options.length;
// Remove all items from the select box
while(select.options.length > 0){
select.remove(0);
}
// If newCart was provided, create a new option and add it to the cart
if(newCart != "a_new_cart_was_not_provided_12345abcde"){
selectOption = new Object();
selectOption.value = newCart;
selectOption.html = newCart;
carts.option[carts.size] = selectOption;
carts.size++;
}
// Save the cart in a cookie
$.cookie("carts",JSON.stringify(carts));
// Add the options to the select box
for(var i = 0; i < carts.size; i++){
var opt = document.createElement('option');
opt.value = carts.option[i].value;
opt.innerHTML = carts.option[i].html;
if($.cookie("activeCart") == carts.option[i].value){
// Set the option to true if the cart is the active cart.
//*****I have tested this with an alert box showing the value of carts.option[i].value This is being called for the correct option*******
opt.selected = true;
}
select.appendChild(opt);
}
}
The new item is being added to the select box, and does have a checkmark next to it when viewing all the items in the select box, it just doesn't show the correct value in the select box.
Here is my html:
<form method="POST" name="cartSelectForm" action="home.php">
<select name="cartList" id="select_cart" data-mini="true" onchange="submitCartForm()" data-icon="false">
<option value="newuniquecartid1234567890">*** New Cart ***</option>
</select>
</form>
edit
I have discovered that jquery css is interfering with javascript filling the innerHTML of the select box. I am linking in: "http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css". Is there anyway to get around the jquery? I can't just remove the jquery css. That would break everything on my site, and I don't have time to redo it all.
Here is a jsfiddle of the problem: http://jsfiddle.net/RjXRB/1/
It's better to use angular way when creating select box - look here: http://docs.angularjs.org/api/ng.directive:select
<select ng-model="color" ng-options="c.name group by c.shade for c in colors">
</select>
If you have a reason to use the innerHtml approach, you should consider using Scope.apply or Scope.$digest as described in the docs.