knockoutjs - Open Select Dropdown on button click

knockoutjs - Open Select Dropdown on button click

by Madhu Ranjan

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<button data-bind="click: onButtonClick">
 Button
</button>
  <select id="dropdown" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>

JavaScript

function VM() {
  var message = ko.observable("hello!!");

  function onButtonClick() {
    var dropdown = document.getElementById('dropdown');    
    showDropDown(dropdown);
  }  
  
  function showDropDown(element){
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
  }

  return {
    message: message,
    onButtonClick:onButtonClick
  }
}

ko.applyBindings(new VM());