Question

我对网络开发还很陌生，所以请耐心等待。所以我有一个for循环，它将使用jQuery为下拉菜单动态生成选项。我有一个专门针对动态创建的按钮的事件监听器，我只想从所选选项中检索“value”属性。我不是在谈论.val，我说的是在for循环过程中我附加到按钮的'value'属性。

某些情况：我正在对NewsApi进行ajax调用（请参阅：https://newsapi.org/），我正在填充下拉菜单，其中包含可供选择的在线报纸选项。 'value'属性存储来自在回调中返回的sources对象的'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
});

然后你不需要事件监听器就可以指定任何与对象参数的其余部分相同的点击功能：

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

Answer 2

这是我的解决方案：

HTML code：

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

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

2 个答案: