how to dynamically trigger select dropdown

Question

How to dynamically trigger select dropdown to open the values, except changing the attribute values as length of option value. I want to trigger the select dropdown (right arrow) dynamically is that any way ?

HTML:

      <div>
        <input type="text" />
      </div>
      <div>
        <select id="testSelect" onfocus="openDrpDown(this)" onblur="closeDrpDown(this)">
            <option>11111</option>
            <option>222222</option>
            <option>444444444</option>
            <option>55555</option>
        </select>
      </div>

Script:
function openDrpDown(){
    //var myDropDown=$("#testSelect");
    //var length = $('#testSelect > option').length;
    //open dropdown
    //myDropDown.attr('size',length);
    $("#testSelect").click();
}

function closeDrpDown(){
    //var myDropDown=$("#testSelect");
    //var length = $('#testSelect > option').length;
    //close dropdown
    //myDropDown.attr('size',0);
}

Exactly what you want to get values of select or something else? — black_pottery_beauty, Jul 27 '16 at 06:47
Please refer this ans http://stackoverflow.com/questions/10547622/trigger-change-event-select-using-jquery — black_pottery_beauty, Jul 27 '16 at 06:48
Possible duplicate of [Simulate click event on select (not working for IE and FF)](http://stackoverflow.com/questions/32236598/simulate-click-event-on-select-not-working-for-ie-and-ff) — Nineoclick, Jul 27 '16 at 06:54

score 0 · Answer 1 · answered Jul 27 '16 at 07:40

You can set two attribute to this select box,data-selectSize which is the two tal number of options and size & length of the options. We will be updating this size onfocus & onblur.

Also we will need tabindex which indicate if the element can take input focus.

  function openDrpDown(elem) {
   $(elem).attr("size", $(elem).attr("data-selectSize"));
    var options = "select[tabindex='" + +$(elem).attr('tabindex') + 1 + "']";

    $(options).fadeTo(50, 0);
  };


function closeDrpDown(elem) {
    $(elem).attr("size", 1);
    var options = "select[tabindex='" + +$(elem).attr('tabindex') + 1 + "']";
    $(options).fadeTo('fast', 1.0);
  };

JSFIDDLE

Thanks for you time, but i tried this already, that why the question itself i asked except this solution is that any other way to achieve this? the reason is - on focus it opening but its not behave as like other native select component, once if we chosen the option while press enter its not closing, since we written onblur its closing the focus out... https://jsfiddle.net/84a4drf5/1/ - i trying to trigger as like mouse click on select right arrow - dynamically? any idea ? — Krish, Jul 28 '16 at 04:30

score -1 · Answer 2 · answered Jul 27 '16 at 06:48

-1

  function tr_click(){
     $("#testSelect").trigger("click");
}

call this where ever you want and if you want to open it on page load call it over body tag <body onload="tr_click()"></body>

answered Jul 27 '16 at 06:48

Amit Kumar Pawar

3,252
1
20
27

how to dynamically trigger select dropdown

2 Answers2