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

Question

我有以下 select 元素：

<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 函数，我希望这些函数运行使用第一个选项值。我目前只能通过在 select 中添加 onblur 和 onchange 属性来实现运行功能标签.

当我只有一个选项元素，即一种产品时，问题就出现了。通过这个我无法 onblur 或 onchange 我在 select 中使用了 onload元素，它也不起作用。

有人知道我遗漏了什么或做错了什么吗？

Answer 1

您可以在填充 <select> 后调用您的函数，因为将元素附加到 DOM 是同步的 activity.

试试这个

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

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 方法重复您的代码段，这是一个简单的示例：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 在评论中指出的那样，如果您无法控制 how/when 元素正在填充，则无需更改任何内容的唯一可能方法是使用一个不好的间隔想法，但另一方面，如果您确实可以控制填充片段，我建议创建一个 api，其中代码填充 select 并实现我刚刚解释的事件方法。

Answer 3

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

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

Executing Javascript function with first option of select element as soon as select element populates

html

javascript

jquery

onload

onblur