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

想象一下，您希望将这些数据填充到选择标记中：

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方法重复您的代码段，这里有一个简单示例： DEMO

这里是完整的代码：

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并实现我刚才解释的事件方法。

Answer 2

您可能需要考虑在填充选项后立即调用方法，而不是触发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：Code Sample

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()

选择元素填充后，使用select元素的第一个选项执行Javascript函数

3 个答案: