在选择元素填充后立即执行带有选择元素第一个选项的Javascript函数
Executing Javascript function with first option of select element as soon as select element populates
我有以下选择元素:
<select id="options" title="prd_name" name="options">
<option id='option1' value='Prdt1'>Product1</option>
<option id='option2' value='Prdt2'>Product2</option>
<option id='option3' value='Prdt3'>Product3</option>
<option id='option4' value='Prdt4'>Product4</option>
</select>
我使用JQuery用数据库中的一些数据填充这个select元素。我想在这个select元素填充了选项后立即运行几个Javascript函数,我希望这些函数使用第一个选项值运行。我目前只能通过添加onblur和onchange属性在选择标签来运行函数。
问题出现了,当我只有一个选项元素,即一个产品。因此,我无法onblur或onchange,我在select元素中使用onload,这不能很好地工作。
谁知道我错过了什么或做错了什么?
您可能需要考虑在填充选项后立即调用这些方法,而不是触发onblur/onchange。
代码如下:
$(document).ready(function(){
//Consider this as success callback
populateOptions();
});
function populateOptions(){
var options = [1,2,3];
var optionsHtml = "";
for(var idx = 0; idx < options.length; idx++){
var val = options[idx];
optionsHtml += "<option id=option"+val+" value='Prdt"+val+"'>Product"+val+"</option>"
}
$("#firstDropdown").html(optionsHtml);
executeMethods();
}
function executeMethods(){
// find the first element
var firstValue = $("#firstDropdown").find('option:eq(0)').val();
if(firstValue === undefined){
return;
}
console.log("Call Method with first Value : " + firstValue);
}
jsbin:代码示例
假设您希望将这些数据填充到select标记中:
var _data=[
{
value:1,
text:'one'
},
{
value:2,
text:'two'
},
{
value:3,
text:'three'
},
{
value:4,
text:'four'
},
{
value:5,
text:'five'
}
];
你可以创建一个像这样的自定义事件:
var selectPopulated=new Event('selectPopulated');
,然后像这样将事件绑定到元素:
$('select').on('selectPopulated',function(){
var firstOption=$(this).find('option:first-child').val();
//your functions go here
alert('Select is all populated - first option value is: '+firstOption);
});
然后在你填充select标签的地方触发事件:
$('select').trigger('selectPopulated');
现在你甚至可以在其他js文件中触发这个事件,而不必只使用trigger
方法重复你的代码片段,这里有一个简单的例子:完整的代码如下:
var _data=[
{
value:1,
text:'one'
},
{
value:2,
text:'two'
},
{
value:3,
text:'three'
},
{
value:4,
text:'four'
},
{
value:5,
text:'five'
}
];
var selectPopulated=new Event('selectPopulated');
function init(){
$('select').on('selectPopulated',function(){
var firstOption=$(this).find('option:first-child').val();
//your functions go here
alert('Select is all populated - first option value is: '+firstOption);
});
renderElements();
}
function renderElements(){
var select=$('select');
for(var i=0, dataLength=_data.length; i<dataLength; i++){
select.append('<option value="'+_data[i].value+'">'+_data[i].text+'</option>');
}
$('select').trigger('selectPopulated');
}
init();
正如@PraneshRavi在评论中指出的,如果你无法控制元素如何/何时被填充,那么不需要改变任何东西的唯一可能的方法就是使用间隔,这是一个坏主意,但另一方面,如果你确实可以控制填充代码片段,我建议创建一个api,其中代码填充选择并实现我刚刚解释的事件方法。
您可以在填充<select>
之后调用您的函数,因为向DOM添加元素是一个同步活动。
试试这个
function addOptions() {
// do stuff to get the data from the database
$('select').html() //adding options based on the data from the database into the <select>
yourFunction(firstValue) //calling your functions
yourFunction2()
}
addOptions()
相关文章:
- Lodash:返回对象的第一个键,该对象的值(即数组)中有一个给定的元素(即字符串)
- Javascript:表单验证getElementById仅返回第一个id元素
- 使用jquery选择元素附近的第一个h2
- 在jQuery中,如何测试一个元素是否是同一类的多个元素中的第一个
- 只获取HTML元素的第一个类
- 如果第二个 html 元素位于第一个 html 元素上方,如何移动该元素
- 使用 querySelectorAll 获取具有该类名的所有元素,而不仅仅是第一个
- 在 javascript 中创建第二个 html 元素会删除第一个
- 如何停止在第一次按下回车键时触发第一个 onclick 事件的元素
- 获取列表中的第一个 DOM 元素
- 第一个jQuery插件-如何以正确的方式保存关联元素数据
- 如何使用Jquery选择第一个td元素及其文本
- 如何获取在视口中可见的第一个DOM元素
- 不要使用jquery选择第一个li元素
- 获取href不仅是第一个,而且是所有匹配的元素
- 如何编写一个选择器来查找第一个“输入”.在类为“x”的元素之后
- 向元素添加另一个类,但作为第一个类
- jQuery + CSS:如何检测第一个“移出”将光标移出元素
- 我如何从最接近的'tr'的第n个元素获得一个值
- Jquery删除所有的第一个span元素