在选择元素填充后立即执行带有选择元素第一个选项的Javascript函数

Question

我有以下选择元素:

<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，这不能很好地工作。

谁知道我错过了什么或做错了什么?

Answer 1

您可能需要考虑在填充选项后立即调用这些方法，而不是触发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:代码示例

Answer 2

假设您希望将这些数据填充到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，其中代码填充选择并实现我刚刚解释的事件方法。

Answer 3

您可以在填充<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()