从动态生成的下拉选项中选择值

Question

我是Web开发的新手，所以请多多包涵。 因此，我有一个for循环，它将使用jQuery动态生成下拉菜单的选项。 我有一个专门用于动态创建按钮的事件侦听器，我只想从所选选项中检索“值”属性。 我不是在谈论.val，而是在for循环过程中附加到按钮的'value'属性。

某些情况：我正在对NewsApi进行ajax调用（请参阅： https ://newsapi.org/），并且在下拉菜单中填充了可供选择的在线报纸。 “值”属性存储来自源对象的“ id”键，该键在回调中返回。

 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); }); 

任何帮助都是极好的

Answer 1

不知道这是否有帮助，但是首先您可以编写以下代码：

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

像这样：

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

那么您无需在可以指定与其他对象参数相同的click函数的任何事件上使用事件监听器：

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

Answer 2

这是我的解决方案：

HTML代码：

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

JavaScript代码：

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

删除以下JavaScript代码：

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