Выполнение функции 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 с некоторыми данными из базы данных. Я хочу запустить несколько функций Javascript, как только этот элемент выбора будет заполнен параметрами, и я хочу, чтобы эти функции запускались с использованием первого значения параметра. В настоящее время я могу выполнять только функции, добавив onblur и onchange атрибуты в тэг тега.

Проблема возникает, когда у меня есть только один элемент элемента, то есть один продукт. При этом я не могу onblur или onchange, и я использовал onload в элементе select, который также не работает.

Кто-нибудь знает, что мне не хватает или что-то не так?

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: Code Sample

Answer 2

Вы можете назвать свои функции после заполнения <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()