CODEWITHSUNDEEP
javascriptjquery
yogihosting
yogihosting

Reputation: 6322

Unable to select first item of dynamically generated select with jquery

I am dynamically generating a select contol with jQuery on my page. The generated select is given below. 

<select id="autoCompleteSelect" size="5" class="autoSelect">
    <option value="firstVal">firstVal</option>
    <option value="secondVal">secondVal</option>
</select>

Now i want to select the first item of this select control on my textbox keyup event. But i cannot do so. The keyup code is - 

        $('#searchInput').keyup(function (e) {
            var a = $(".autoSelect").val();
            var myDDL = $('.autoSelect');
            myDDL[0].selectedIndex = 0;
        });

however when i do not generate select dynamically and just put it on the page from the beginning. Everything works fine. What could be the solution for dynamically generated select.

Upvotes: 0

Views: 346

Answers (3)

intekhab
intekhab

Reputation: 1596

Keep your code in the form something like

 $('someStaticSelector').on('keyup', 'DynamicAddedSelector',  function (e) {
            var a = $(".autoSelect").val();
            var myDDL = $('.autoSelect');
            myDDL[0].selectedIndex = 0;
        });

Upvotes: 1

Paul Booblick
Paul Booblick

Reputation: 363

$("#autoCompleteSelect").val($("#autoCompleteSelect option:first").val());

http://jsfiddle.net/oob1ybxp/

Upvotes: 2

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

If working with dynamically generated content, it is best to use event delegation concept like below:

// document here can be replaced with closest parent which 
// created/ existed without dynamic load
// provided context parameter to on function
$(document).on('keyup','#searchInput', function (e) {
   var a = $(".autoSelect").val();
   var myDDL = $('.autoSelect');
   myDDL[0].selectedIndex = 0;
});

Read this .on() also.

Upvotes: 1

Related Questions