Javascript generate dynamic dropdown list

Question

I have a bootstrap checkbox, with dynamic elements inside:

<div class="btn-group" style="margin-bottom:5px; width: 100%;">
                            <a id="urlFieldNameButton" class="btn btn-default btn-block dropdown-toggle btn-select" style="width: 100%;" data-toggle="dropdown" href="#">Select URL field name<span class="caret"></span></a>
                            <ul id="urlFieldName" class="dropdown-menu scrollable-menu" style="width: 100%;">
                            </ul>
                        </div>

Here is an example: http://www.bootply.com/9CvIygzob8

The ajax function that loads the combobox elements looks like this:

function FillCombo(json, combo) {
                for (var i = 0; i < json.length; i++) {
                    var li = document.createElement("li");
                    var a = document.createElement("a");
                    a.innerHTML=json[i];
                    a.setAttribute("href","#");
                    //a.setAttribute("onclick", "selectElement()");
                    a.onclick = function(){ selectElement(a); };
                    li.appendChild(a);
                    combo.appendChild(li);
                }
            }

And here is a function that triggers when I am pressing on dynamically uploaded anchor:

function selectElement(a) {
    var selText = a.innerHTML;
    $("#urlFieldNameButton").html(selText+' <span class="caret"></span>');
}

I need to pass <a> tag as the parameter, because "this" object is equal to window, not to <a>, as it would be with static version of this function call.

The problem is that when I press on any of dynamically uploaded <a> of this list, the function always receives the last one(even when I press on first). Is there a better way to work with dynamic content?

how do you really mean with that "json" parameter? Can you paste an usage example? — user3303864
– user3303864, Commented Oct 15, 2014 at 16:41
Json is an array on Strings, so I am creating anchor names out of json I receive, and that thing works great. The only thing that does not work properly is onClick function. — PBA
– PBA, Commented Oct 15, 2014 at 16:42
"Is there a better way to work with dynamic content?" Yes, use a data binding framework such as Knockout, Ember, Angular, etc. — cvrebert
– cvrebert, Commented Oct 15, 2014 at 17:59

nrodic · Accepted Answer · 2014-10-15 17:42:19Z

1

This is probably not optimal solution but seems it can help you:

function FillCombo(json, combo) {
  for (var i = 0; i < json.length; i++) {
    (function(){
      var li = document.createElement("li");
      var a = document.createElement("a");
      a.innerHTML=json[i];
      a.setAttribute("href","#");
      a.onclick = function(){ selectElement(a); };
      li.appendChild(a);
      combo.appendChild(li);
    })();
  }
}

Quick preview (with console window open).

answered Oct 15, 2014 at 17:42

nrodic

3,0213 gold badges36 silver badges39 bronze badges

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

Comments

tamak · Accepted Answer · 2014-10-15 17:36:32Z

1

I've had similar issues in a recent project and I basically used the index of the li to make sure the specific clicked item was the one registering the onclick... if that makes sense... I dont have access to the code right now, but the fact that its getting just the LAST one means it needs to know which specific li is sending the onclick... so you can base that on the specific id of the dynamically created li, the index of that li or the .eq() of it...

good luck with it.

answered Oct 15, 2014 at 17:36

tamak

1,5912 gold badges22 silver badges43 bronze badges

Collectives™ on Stack Overflow

Javascript generate dynamic dropdown list

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related