45704

Using jquery append to add option values into a select element not working

Question:

I'm looking to dynamically populate a select element with names of items that are stored into an array.

For some reason it's not working and I'm not sure why.

<strong>HTML:</strong>

<div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> and <select class="select2"> </select> </div>

Note that I'm using bootstrap for layout.

Here's the jquery I'm using to try and populate ".select1"

<strong>JQUERY:</strong>

select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); }

Note that the function 'select' is stored within an object called 'display'.

state.greens is the name of the array I'm trying to access.

So at the end of my html page I call display.select(); to call the function.

No error messages are showing up in the console.

Also, I saw this question: <a href="https://stackoverflow.com/questions/12926558/appending-options-to-select-using-jquery-doesnt-work" rel="nofollow">Appending options to select using jQuery doesn't work</a>

but was looking for a jquery centric answer and this seems like it ought to work.

Answer1:

You can do in that way:

$.each(state.greens, function(index, value) { $('.select1').append($('<option>', { value: index , text: state.greens[index].name })); });

Answer2:

When you append you are basically adding to the .innerHTML value of a container. This works for most elements except for <select>. You'll have to add elements properly for the DOM to pick it up:

var select=document.getElementById('select1'); var option=document.createElement('option'); option.setAttribute('value','option1'); option.innerHTML='Option 1'; select.appendChild(option);

Recommend

  • Disable dropdown item based on selection done on other dropdown box
  • create dropdown list with scrollbar
  • jQuery remove options except current
  • javascript - duplicate multi-level drop-downs on button click and return values
  • Limit select2 selections by group?
  • jQuery Get value from class attribute of multiple elements in array without loop
  • jQuery datatable setting column design and value in success callback
  • Html select multiple get all values at onchange event
  • Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • WPF version of .ScaleControl?
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Android Activity.onWindowFocusChanged doesn't get called from within TabHost
  • jQuery .attr() and value
  • How to clear text inside text field when radio button is select
  • Get data from AJAX - How to
  • Email format validation in mvc3 view
  • Validaiting emails with Net.Mail MailAddress
  • Which linear programming package should I use for high numbers of constraints and “warm starts” [clo
  • Javascript + PHP Encryption with pidCrypt
  • jQuery tmpl and DataLink beta
  • align graphs with different xlab
  • AT Commands to Send SMS not working in Windows 8.1
  • bootstrap to use multiple ng-app
  • How to disable jQuery.jplayer autoplay?
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How do I configure my settings file to work with unit tests?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Is it possible to post an object from jquery to bottle.py?
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?