I'm playing around with Javascript as a hobby and I've been having trouble accessing elements that I have dynamically created via another function.
Essentially, I have a link that dynamically creates a couple of dropdown selects with a few options. Then I have a second link which I would try to print some of the selected options onto console.
HTML:
create
collect
<div id="box"><br>
Javascript:
function maker() {
box.appendChild(document.createElement("br"));
for (i = 0; i < 2; i++) {
box.appendChild(document.createTextNode("test " + (i + 1) + " "));
for (k = 0; k < 2; k++) {
var dropdown = document.createElement("select");
box.appendChild(dropdown);
for (j = 0; j < nice.length; j++) {
var option = document.createElement("option");
option.value = nice[j];
option.text = nice[j];
option.id = 'option' + i + k;
console.log(option.id)
dropdown.appendChild(option);
}
}
box.appendChild(document.createElement("br"));
}
}
function getter() {
var test = document.getElementById("option01");
console.log(test.options[test.selectedIndex].value);
}
I've printed to console the option id's as they are created (seems to have no problem printing this), and added them to the DOM via appendChild. However with my second function, I am unable to retrieve the selected value of the options despite explicitly referencing the id.
My guess is that it has something to do with the order the scripts are loaded. Can anyone help me understand what's going on?
Attached is my JSFiddle file,
http://jsfiddle.net/c8h6gx2d/1/
Cheers,
The problem is that <option>s are nested inside of <select>s, and it's the *<select>*s which have a selectedIndex property. So, test.options[test.selectedIndex].value won't work when test is an <option> element. Try using getElementById to get one of the <select>s, for one, and then just access its .value (which is less cumbersome than checking selectedIndex):
var nice = [2, 3, 5];
function maker() {
box.appendChild(document.createElement("br"));
for (i = 0; i < 2; i++) {
box.appendChild(document.createTextNode("test " + (i + 1) + " "));
for (k = 0; k < 2; k++) {
var dropdown = document.createElement("select");
dropdown.id = 'select' + i;
box.appendChild(dropdown);
for (j = 0; j < nice.length; j++) {
var option = document.createElement("option");
option.value = nice[j];
option.text = nice[j];
dropdown.appendChild(option);
}
}
box.appendChild(document.createElement("br"));
}
}
function getter() {
var test = document.getElementById("select0");
console.log(test.value);
// same as:
// console.log(test.options[test.selectedIndex].value);
}
create
collect
<div id="box"><br>
Also note that duplicate IDs in a single document is invalid HTML, so if you ever call maker more than once, for your HTML to be valid, you might have a separate counter outside of maker that gets incremented:
const makeCount = 0;
function maker() {
// ...
dropdown.id = 'select' + makeCount + '_' + i;
// ...
makeCount++;
}
(or, avoid IDs entirely, if at all possible, numeric ID indicies are a code smell - use classes instead)
We need to discriminate between option elements and the select element. The select element is the one with which you want to interact most of the time, and the option elements are simply a collection of possible entries for the select element.
Your code as it stands now generates these sort of elements:
<select>
<option value="2" id="option00">2</option>
<option value="3" id="option00">3</option>
<option value="5" id="option00">5</option>
</select>
As you see all the options receive the same ID - which is generally forbidden in HTML documents. You might consider moving the ID indicator to the select element, which also gives you access to the value of the selected option.
Here is the revised JS code with comments before revisions:
var nice = [2, 3, 5];
function maker() {
box.appendChild(document.createElement("br"));
for (i = 0; i < 2; i++) {
box.appendChild(document.createTextNode("test " + (i + 1) + " "));
for (k = 0; k < 2; k++) {
var dropdown = document.createElement("select");
# Giving the select item an ID instead of each option
dropdown.id = 'select' + i + k;
box.appendChild(dropdown);
for (j = 0; j < nice.length; j++) {
var option = document.createElement("option");
option.value = nice[j];
option.text = nice[j];
option.id = 'option'
console.log(option.id)
dropdown.appendChild(option);
}
}
box.appendChild(document.createElement("br"));
}
}
function getter() {
# Getting the select element instead of the option
var selectElement = document.getElementById("select00");
# The value attribute of the select element is the value of the selected option
console.log(selectElement.value);
}
Related
I have a select element:
function find() {
var schoolList = document.getElementByID("schoolList");
if (schoolList.hasAttributes("[data attribute value]") {
//modify text in found option
};
};
find();
<div id="SelectWrapper" class="menu">
<form>
<select id="schoolList">
<option value='student' data-tier="student" data->Student 1</option>
<option value="teacher" data-tier="faculty" data->Teacher</option>
</form>
</div>
Using pure Javascript, I want to create an if statement within a function that checks to see if an option has an appropriate data attribute value (for instance, "student" or "faculty") and then adds to or modifies the existing innerHTML/text.
You can use querySelectorAll() to find all the options with a particular data value, then loop over them.
function find() {
var options = document.querySelectorAll("#schoolList option[data-tier=student]");
for (var i = 0; i < options.length; i++) {
options[i].innerHTML += " (something)";
}
}
The example for you
function find() {
var schoolList = document.getElementById("schoolList");
if (schoolList.hasAttributes("[data attribute value]")) {
var opts = schoolList.getElementsByTagName("option");
for (var i = 0, len = opts.length; i < len; i++) {
var option = opts[i];
// modify
if (option["data-tier"] === "student") {
option.text = "new text content"
}
}
// add new
for (var i =0; i < 5; i++) {
var opt = document.createElement("option");
opt.value = i;
opt.innerHTML = "Option " + i;
schoolList.appendChild(opt);
}
};
};
find();
I have a select menu that, on change through AJAX, generates another select menu, which in turn on change generates yet another select menu with yet another callback on change (lets say alert(chosenValue)). By working my way through these select menus the first time, I generate correctly the content for the second and third select, and the alert is printed correctly.
From the second time onward, when I generate new content for the third select, when choosing an option, multiple alerts are fired with the elements that were at that position in the select. I am guessing that these callbacks where generated and stayed there, because I generated them with $("select#dropdownMenu3").change(function() {...});.
Is there a way to remove such generated callbacks and have a "virgin" select#dropdownMenu3 again? I'm using jQuery, so big pluses if the solution includes it! Thanks!
EDIT: code becasue - reEDIT: I'm starting to thing that the problem is far more serious. Here is the whole thing
/*All the variables that you see used are defined somewhere up here*/
$("select#dropdownMenu1").change(function(){
$('select#dropdownMenu3').unbind('change');
var typeChosen = $(this).children(":selected").html();
if(!searchSuggestions){
$.get( "/searchdata", function( data ) {
data = JSON.parse(data);
searchSuggestions = data;
for(var i = 0; i < data.length; i++){
if(data[i].type == typeChosen){
$("#dropdownMenu2").empty();
$("#dropdownMenu2").append("<option disabled>Choose a Predicate</option>");
for(var j = 0; j < data[i].predicates.length; j++){
$("#dropdownMenu2").append("<option value='" + j + "'>" + data[i].predicates[j].predicate + "</option>");
}
}
}
$("#dropdownMenu2").select2();
$("select#dropdownMenu2").change(function(){
predicateChosenIndex = parseInt($(this).children(":selected").val());
$("#tdDropdownMenu3").html("");
$('#tdDropdownMenu3').append("<select class=\"js-example-basic-multiple\" id=\"dropdownMenu3\"><option disabled>Choose an Object</option></select>");
for(var i = 0; i < data.length; i++){
if(data[i].type == typeChosen){
for(var k = 0; k < data[i].predicates[predicateChosenIndex].values.length; k++){
$("#dropdownMenu3").append("<option value='" + k + "'>" + data[i].predicates[predicateChosenIndex].values[k].value + "</option>");
}
}
}
$("#dropdownMenu3").select2();
$("select#dropdownMenu3").change(function(){
objectChosenIndex = parseInt($(this).children(":selected").val());
for(var i = 0; i < data.length; i++){
if(data[i].type == typeChosen){
alert(data[i].predicates[predicateChosenIndex].values[objectChosenIndex].value + " chosen");
}
}
});
});
});
}
You can use:
$('select#dropdownMenu3').unbind('change');
But as long as we don't see how you generate your html, this might not be the best solution.
I have two sets of data in a JSON file (ACodes and BCodes), which I want to read and display as the options of two different dropdowns in an HTML file. I want to have one common JavaScript function that I can use to get along with the same (shown below) but I am not getting the desired output.
Help about where I am going wrong is much appreciated!
HTML
<script>
var select, option, arr, i;
function loadJSON(var x){
if(x.match == "A"){
array = JSON.parse(ACodes);
select = document.getElementById('dd1');
for (i = 0; i < array.length; i++) {
option = document.createElement('option');
option.text = array[i]["Code"];
select.add(option);
}
}
else if(x.match == "B"){
array = JSON.parse(BCodes);
select = document.getElementById('dd2');
for (i = 0; i < array.length; i++) {
option = document.createElement('option');
option.text = array[i]["Curr"];
select.add(option);
}
}
}
</script>
<body onload="loadJSON('A');laodJSON('B')">
<select id="dd1"></select>
<select id="dd2"></select>
</body>
JSON
ACodes = '[{"Code":"BHAT"}, {"Code":"MALY"}]';
BCodes = '[{"Curr":"CAC"},{"Curr":"CAD"}]';
remove var at loadJSON(var x) => loadJSON(x)
remove .match at x.match == "A", you seems to want to compare x with specific value, not testing it as regexp, so change to x === "A"
laodJSON('B'); at body onload is typo.
There's some reusable codes, you can attract the value depends on x and make the code shorter. This step is not a must do, as it won't cause your origin code unable to work.
<body onload=" loadJSON('A');loadJSON('B');">
<select id="dd1"></select>
<select id="dd2"></select>
<script>
var select, option, arr, i;
var ACodes = '[{"Code":"BHAT"}, {"Code":"MALY"}]';
var BCodes = '[{"Curr":"CAC"},{"Curr":"CAD"}]';
function loadJSON(x){
var array, select, target;
if (x === 'A') {
array = JSON.parse(ACodes);
select = document.getElementById('dd1');
target = 'Code';
} else if (x === 'B') {
array = JSON.parse(BCodes);
select = document.getElementById('dd2');
target = 'Curr';
}
for (i = 0; i < array.length; i++) {
option = document.createElement('option');
option.text = array[i][target];
select.add(option);
}
}
</script>
</body>
Edit: to create it more dynamically, you can make the function accept more params, so you can have more control over it. Demo is on jsfiddle.
// Append options to exist select
function loadJSON(jsonObj, key, selectId) {
var arr = JSON.parse(jsonObj);
// Get by Id
var select = document.querySelector('select#' + selectId);
// Loop through array
arr.forEach(function(item) {
var option = document.createElement('option');
option.text = item[key];
select.add(option);
});
}
// Append select with id to target.
function loadJSON2(jsonObj, key, selectId, appendTarget) {
// Get the target to append
appendTarget = appendTarget ? document.querySelector(appendTarget) : document.body;
var arr = JSON.parse(jsonObj);
// Create select and set id.
var select = document.createElement('select');
if (selectId != null) {
select.id = selectId;
}
// Loop through array
arr.forEach(function(item) {
var option = document.createElement('option');
option.text = item[key];
select.add(option);
});
appendTarget.appendChild(select);
}
<script>
var select, option, arr, i;
var ACodes = '[{"Code":"BHAT"}, {"Code":"MALY"}]';
var BCodes = '[{"Curr":"CAC"},{"Curr":"CAD"}]';
function loadJSON(x){
if(x == "A"){
array = JSON.parse(ACodes);
select = document.getElementById('dd1');
for (i = 0; i < array.length; i++) {
option = document.createElement('option');
option.text = array[i]["Code"];
select.add(option);
}
}
else if(x == "B"){
array = JSON.parse(BCodes);
select = document.getElementById('dd2');
for (i = 0; i < array.length; i++) {
option = document.createElement('option');
option.text = array[i]["Curr"];
select.add(option);
}
}
}
</script>
<body onload='loadJSON("A");loadJSON("B")'>
<select id="dd1"></select>
<select id="dd2"></select>
</body>
Now this code will work.
The match() method searches a string for a match against a regular expression. So match() function will not work here. You have to use equal operator for get this done.
I hope, This will help you.
You were well on your way, you just need to make it more dynamic :)
function loadOptions(json) {
json = JSON.parse(json);
var select = document.createElement('select'), option;
for (var i = 0; i < json.length; i++) {
for (var u in json[i]) {
if (json[i].hasOwnProperty(u)) {
option = document.createElement('option');
option.text = json[i][u];
select.add(option);
break;
}
}
}
return select;
}
And to use it:
document.body.appendChild(loadOptions(ACodes));
document.body.appendChild(loadOptions(BCodes));
FIDDLE
http://jsfiddle.net/owgt1v2w/
The answers above will help you, but im strongly recommend you to check some javascript's frameworks that can help you with that kind of situation.. The one im using is knockout.js (http://knockoutjs.com/)
Take a look in the documentation, also there a lot of topics related in stackoverflow http://knockoutjs.com/documentation/options-binding.html
Regards!
I have used asp:drowdownlist on dataviewwebpart and is bind with source spdatasource1.
It have multiple duplicate items. How could I delete those duplicate item
asp:DropDownList runat="server" id="DropDownList1" DataValueField="ID" DataTextField="ProgramMaster" DataSourceID="spdatasource1" AutoPostBack="False" AppendDataBoundItems="True" ToolTip="Select a Program from the list"/>
Also, It is showing items in following formation ID;#ProgramName. How can I get programName only.
Well I use JQuery to remove duplicates item from asp:dropdownlist and here's the code if in-case somebody might need it. The code works in four part, Get the value from Dropdown, strip off the Duplicates and get the value in usable form, Remove the existing value from Dropdown and last set or append the values back to the dropdown list.
<script type="text/javascript">
$(document).ready(function(){
var handles= [];
$('#DropDownList1 option').each(function() {
var Prog1 = $(this).attr('text');
if(Prog1 != 'All'){
var Prog2 = Prog1.split(';#');
handles.push('All');
handles.push(Prog2[1]);
}
//Remove The existed Dropdownlist value
$("select#DropDownList1 option[value='" + $(this).val() + "']").remove();
//$(this).val().remove();
});
//Removing the Duplicates
var individual = [];
for (var i = 0; i<handles.length; i++) {
if((jQuery.inArray(handles[i], individual )) == -1)
{
individual .push(handles[i]);
}
}
//Inserting or setting the value from array individual to the dropdownlist.
var sel = document.getElementById('DropDownList1');
for(var i = 0; i < individual.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = individual[i];
opt.value = individual[i];
sel.appendChild(opt);
}
});
</script>
P.S if the given ID didn't work fine for dropdown, get the ID from IE debugging tool which will be in form ctl00_PlaceHolderMain_g_a0a2fb36_2203_4d2e_bcd4_6f42243b880f_DropDownList1
you can do this with jquery
var usedNames = {};
$("select[name='company'] > option").each(function () {
if(usedNames[this.text]) {
$(this).remove();
} else {
usedNames[this.text] = this.value;
}
});
or with server side code try this
void RemoveDuplicateItems(DropDownList ddl)
{
for (int i = 0; i < ddl.Items.Count; i++)
{
ddl.SelectedIndex = i;
string str = ddl.SelectedItem.ToString();
for (int counter = i + 1; counter < ddl.Items.Count; counter++)
{
ddl.SelectedIndex = counter;
string compareStr = ddl.SelectedItem.ToString();
if (str == compareStr)
{
ddl.Items.RemoveAt(counter);
counter = counter - 1;
}
} } }
Given an HTML form element like:
<select id='mydropdown'>
<option value='foo'>Spam</option>
<option value='bar'>Eggs</option>
</select>
I know I can select the first option with
document.getElementById("mydropdown").value='foo'
However, say I have a variable with the value "Spam"; can I select a dropdown item by its text rather than by its value?
var desiredValue = "eggs"
var el = document.getElementById("mydropdown");
for(var i=0; i<el.options.length; i++) {
if ( el.options[i].text == desiredValue ) {
el.selectedIndex = i;
break;
}
}
I'd use the selectedIndex or a loop to select the option by text, the code below doesn't work.
document.getElementById("mydropdown").text = 'Eggs';
If you want to get an option by its innertext and not by the value you can do this:
function go(){
var dropdown = document.getElementById('mydropdown');
var textSelected = 'Spam';
for(var i=0, max=dropdown.children.length; i<max; i++) {
if(textSelected == dropdown.children[i].innerHTML){
alert(textSelected);
return;
}
}
}
Older IE does not handle options of a select as child nodes, but all browsers implement the text property of a select's option collection.
function selectbytext(sel, txt){
if(typeof sel== 'string'){
sel= document.getELementById(sel) || document.getELementsByName(sel)[0];
}
var opts= sel.options;
for(var i= 0, L= opts.length; i<L; i++){
if(opts[i].text== txt){
sel.selectedIndex= i;
break;
}
}
return i;
}