Generate dropdown List in JavaScript (unknown mistake)

Question

I want to regenerate List2 (selSortt) everytime the user changes the selection in List1 (selQueryType). In its original state, List2 is blank. Both lists are part of a larger HTML input document. List1 has 4 options, so in the end there will be 4 ifs - actually a switch. List 2 is generated from a predefined array (listvalues), NOT from List1 (see code).

Function QueryTypeChg() is fired by onchange List1 - I checked with an alert, it is fired. The problem seems to be in the for cycle, when trying to generate the new options of List2. No options are added to List2 - it remains blank, as it is originally.

function QueryTypeChg()
{
var selIndex = document.getElementById("selQueryType").selectedIndex;

var objSel = document.getElementById("selSortt");
var i = 0;

while (objSel.length > 0)
   {
   objSel.remove(0);
   }

if (selIndex == 0)
   {
   var listvalues = ["Species", "Region, area", "Anthesis", "Vulnerability"];

   for (i = 0; i < options.length; i++) 
       {
       var option = document.createElement("option");
       option.text = listvalues[i];
       option.value = i;       
//       alert("option.text is " + option.text);
       objSel.add(option);
       }
   }


}

gurvinder372 · Accepted Answer · 2016-03-25 10:53:35Z

1

because you are removing the element by doing

while (objSel.length > 0)
{
  objSel.remove(0);
}

If you want to clear the select then simply replace this while loop with

objSel.innerHTML = "";

Complete code should be

function QueryTypeChg()
{
  document.getElementById("selSortt").innerHTML = document.getElementById("selQueryType").innerHTML 
  document.getElementById("selSortt").selectedIndex = document.getElementById("selQueryType").selectedIndex;
}

edited Mar 25, 2016 at 10:53

answered Mar 25, 2016 at 10:47

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

gurvinder372 Over a year ago

@RayonDabre remove is removing that element from its DOM Tree, please check the document link attached

Rayon Over a year ago

OP wants to remove all the options and then add new options to the select.. What is wrong with the code he has written ? innerHTML = "" could be another approach but why do we need it ?

gurvinder372 Over a year ago

I assumed that by doing remove(0) he intended to remove the child but instead he ended up removing the element itself. I have posted another much simpler approach.

Mikey Over a year ago

The remove() method is taken from W3Schools, which says it is the opposite of add() - adding an option to a list. w3schools.com/jsref/met_select_remove.asp. As I clearly stated, I just want to re-generate the list, not to remove it from the document. But this is secondary; in the original state, the list is EMPTY, and my code DOES NOT add new options to the list from array listvalues. This is for now my problem. :)

gurvinder372 Over a year ago

@Mikey Check the link I have shared, it removes the current node from DOM tree. Did you tried the code I have shared?

|

anomepani · Accepted Answer · 2016-03-25 10:49:56Z

0

You have use options variable instead of listvalues please change below code which might help you

 for (i = 0; i < options.length; i++)

with

for (i = 0; i < listvalues.length; i++)

answered Mar 25, 2016 at 10:49

anomepani

1,8663 gold badges27 silver badges34 bronze badges

1 Comment

Mikey Over a year ago

True, but this is not the problem. Thanks.

Mikey · Accepted Answer · 2016-03-26 05:45:04Z

I "nailed" it with the following code:

function QueryTypeChg()
{
var selIndex = document.getElementById("listQueryType").selectedIndex;
localStorage.setItem("QueryType", selIndex);

if (selIndex == 0)
   {
   var listvalues = ["Species", "Region, area", "Anthesis", "Vulnerability"];
   var str_options = '';

   for (var i=0; i < listvalues.length; i++)
       {
       str_options += "<option value='" + [i] + "'>" + listvalues[i] + "</option> \r\n";
       }

   $("#listSort").html("");
   $("#listSort").append(str_options);
   return;
   }

}

I still don't know why it didn't work with the initial code. It DOES work in the W3Schools Try It window and in other examples I've seen. What's also peculiar is that it uses the html() method, not the innerHTML property. What kind of all-over-the-place language is this JavaScript anyway? In Pascal there is always ONLY ONE WAY to do a certain thing!

Collectives™ on Stack Overflow

Generate dropdown List in JavaScript (unknown mistake)

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related