Auswählen von Werten aus dynamisch generierten Drop-Down-Optionen

Question

Ich bin relativ neu in der Web-Entwicklung, also bitte tragen Sie mit mir. So habe ich eine for-Schleife, die dynamisch Optionen für ein Dropdown-Menü mit jQuery generieren wird. Ich habe einen Ereignis-Listener speziell für dynamisch erstellte Schaltflächen und möchte einfach das Attribut "value" von der ausgewählten Option abrufen. Ich spreche nicht über .val, ich spreche über das Attribut 'value', das ich während des For-Loop-Prozesses an die Schaltfläche angefügt habe.

Einige Kontext: Ich mache Ajax Anrufe an die NewsApi (siehe: https://newsapi.org/) und ich bevölke die Dropdown-Menü mit Optionen von Online-Zeitungen zur Auswahl. Das Attribut 'value' speichert den Schlüssel 'id' aus dem Quellenobjekt, das im Callback zurückgegeben wird.

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

wie folgt aus:

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++){ 
 
\t console.log(response.sources[i].id); 
 
\t console.log(response.sources[i].name); 
 
\t console.log("======================"); 
 
\t // <a class="dropdown-item" href="#"></a> 
 
\t // <a class="dropdown-item" href="#"></a> 
 
\t // <a class="dropdown-item" href="#"></a> 
 
\t source = response.sources[i].id; 
 
\t sourceName = response.sources[i].name; 
 
\t var newSource = $('<option>'); 
 
\t newSource.addClass('dropdown-item'); 
 
\t newSource.attr('name',i); 
 
\t newSource.attr('href', '#'); 
 
\t newSource.attr('value', source); 
 
\t newSource.text(sourceName); 
 
\t $('.dropdown-menu').append(newSource); 
 

 
} 
 

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

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

jede Hilfe würde

Answer 1

Sie nicht wissen, ob dies würde helfen, aber zuerst können Sie schreiben diesen Code etwas schöner genial :

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

dann Ereignis-Listener Sie nicht auf irgendetwas müssen Sie Funktion klicken gleiche wie Rest des Objekts params angeben:

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

Answer 2

Hier ist meine Lösung:

HTML-Code:

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

Javascript-Code:

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

entfernen Sie die folgende JavaScript-Code: