Trigger Select Option Click from outside

by JustLikeThatUiDeveloper

HTML

<div class="select-sample">
    <select id="select-series">
        <option>Select Fav Series</option>
        <option>F.R.I.E.N.D.S</option>
        <option>Dr. House</option>
        <option>2 Broke Girls</option>
    </select>
    <div class="buttons">
        <button id="friends">Click to select F.R.I.E.N.D.S as fav series</button>
        <button id="house">Click to select Dr. House as fav series</button>
        <button id="2bg">Click to select 2 Broke Girls as fav series</button>
    </div>
</div>

CSS

button {
  min-width: 135px;
  max-width: 200px;
  min-height: 50px;
  border: 0;
  outline: 0;

  color: white;

  /* pink to orange */
  background: #ee0979; 
  background: linear-gradient(to right, #ee0979, #ff6a00);
  
  vertical-align: top;
  margin-top:10px;
  cursor: pointer;
}

JavaScript

$("#friends").click(function(event) {
		/* Act on the event */
		 $("#select-series option:eq(1)").prop('selected',true).trigger('change');
	});
	$("#house").click(function(event) {
		/* Act on the event */
		 $("#select-series option:eq(2)").prop('selected',true).trigger('change');
	});
	$("#2bg").click(function(event) {
		/* Act on the event */
		 $("#select-series option:eq(3)").prop('selected',true).trigger('change');
	});