0

I am looking for a way to open a select options (like if we click on a select) when I click on a button. like this example : enter image description here

the HTML code is here :

<select id="sel1">
    <option value="">Please select an option</option>
    <option value="1">Val1</option>
    <option value="2">Val2</option>
    <option value="3">Val3</option>
</select>
<button id="btn">fire</button>

https://jsfiddle.net/stefchrif/2vz7fog3

stef-chrif
  • 33
  • 10

1 Answers1

1

You need to use click event then find option with value "option[value="2"]" and then set prop selected to true

https://api.jquery.com/prop/

// click on button
$('#btn').click( function() {
  //$('#sel1').find('option[value="2"]').prop('selected', true);
  var size = $('#sel1 option').length;
  if (size != $("#sel1").prop('size')) {
      $("#sel1").prop('size', size);
  } else {
      $("#sel1").prop('size', 1);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel1">
    <option value="">Please select an option</option>
    <option value="1">Val1</option>
    <option value="2">Val2</option>
    <option value="3">Val3</option>
</select>
<button id="btn">fire</button>
SKJ
  • 2,184
  • 1
  • 13
  • 25
  • Hello, No this is not what I need, I need only to open the select dropdown list, and show all options when I click on the fire button. – stef-chrif Mar 25 '21 at 13:26
  • Check my answer – SKJ Mar 25 '21 at 14:10
  • 1
    Hello Again, But this solution only change the size of the select and it can cause some problems on the display, Normally what I need is to simulate the click on the select (when it open to show the options) not just make it bigger to show all results. – stef-chrif Mar 26 '21 at 08:10
  • Its the only way to do something like you want it. Look here : https://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list – SKJ Mar 27 '21 at 04:47