Selecting values from dynamically generated dropdown options

Question

I am fairly new to web-development, so please bear with me. So I have a for-loop that will dynamically generate options for a dropdown-menu using jQuery. I have an event listener specifically for buttons created dynamically and I simply want to retrieve the "value" attribute from the selected option. I'm not talking about .val, I'm talking about the 'value' attribute that I appended to the button during the for-loop process.

Some context: I am making ajax calls to the NewsApi (see: https://newsapi.org/) and I am populating the dropdown menu with options of online newspapers to choose from. The 'value' attribute is storing the 'id' key from the sources object that gets returned in the callback.

var sourceName;
var attr;
var title;
var description;
var url;
var source = 'engadget';
var queryURL =  "https://newsapi.org/v1/articles?source="+source+"&apiKey=5d9f7c67d4384f35bd73aa91efca8a73";
var attr;
var title;
var description;
var url;
const length = 60;


///////////////////////////////////////////////////////////////////
//getting the sources from the api to 
//be used in subsequent ajax calls
$.ajax({
url:"https://newsapi.org/v1/sources?language=en",
method: "GET"
}).done(function(response) {
console.log(response);
console.log(response.sources.length);
for(var i = 0; i < response.sources.length; i++){
	console.log(response.sources[i].id);
	console.log(response.sources[i].name);
	console.log("======================");
	// <a class="dropdown-item" href="#"></a>
	// <a class="dropdown-item" href="#"></a>
	// <a class="dropdown-item" href="#"></a>
	source = response.sources[i].id;
	sourceName = response.sources[i].name;
	var newSource = $('<option>');
	newSource.addClass('dropdown-item');
	newSource.attr('name',i);
	newSource.attr('href', '#');
	newSource.attr('value', source );
	newSource.text(sourceName);
	$('.dropdown-menu').append(newSource);

}

});
///////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////
$(document).on('click', 'option:selected', function(){
   source = $('option:selected').text();
   console.log('source: ' + source);
    
});

any help would be awesome

The KNVB · Accepted Answer · 2017-09-20 01:37:46Z

1

Here is my solution:

HTML code:

<select class="dropdown-menu" onchange="getSource(this)">
</select>

Javascript code:

function getSource(theSelectBox)
{
   console.log(theSelectBox.options[theSelectBox.selectedIndex].value);
}

Remove the following javascript code:

///////////////////////////////////////////////////////
$(document).on('click', 'option:selected', function(){
          source = $('option:selected').text();
          console.log('source: ' + source);
});

answered Sep 20, 2017 at 1:37

The KNVB

3,8523 gold badges35 silver badges64 bronze badges

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

Comments

pegla · Accepted Answer · 2017-09-20 01:23:29Z

0

Don't know if this would help, but first you can write this code bit nicer:

var newSource = $('<option>');
    newSource.addClass('dropdown-item');
    newSource.attr('name',i);
    newSource.attr('href', '#');
    newSource.attr('value', source );
    newSource.text(sourceName);

like this:

var newSource = $('<option/>'{
  class: 'dropdown-item',
  name: i,
  href: '#',
  value: source,
  text: sourceName
});

then you don't need event listener on anything you can specify click function same as rest of the object params:

 var newSource = $('<option/>'{
      class: 'dropdown-item',
      name: i,
      href: '#',
      value: source,
      text: sourceName,
      click: function (event){
        console.log(i, sourceName, source);
      }
    });

answered Sep 20, 2017 at 1:23

pegla

1,8864 gold badges19 silver badges20 bronze badges

2 Comments

dalt25 Over a year ago

No kidding, I didn't know you can add all of your attributes in one nice object literal, your solution definitely helped. But how come you no longer need an event listener for the click function? The element is being made dynamically, no?

pegla Over a year ago

exactly element is made dynamically, but on click event is added to each element at the element creation and since in that scope you have all data it works.

Collectives™ on Stack Overflow

Selecting values from dynamically generated dropdown options

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related