JSFiddle - React, Tailwind, and code Playground

HTML

</head>
<body>
 
<select id="soo">
	<option value="1">Orange</option>
	<option value="2">SFR</option>
	<option value="3">Free</option>
    </select>
<select id="foo">
	<option value="1">265</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
</select>
  <p><strong>result :</strong> <span id="result"></span></p>
   <p><strong>test:</strong> <span id="rt"></span></p>

JavaScript

$(document).ready(function(){ 
   
    $('#soo').change(function () {
    valO=["265","2","3"];
	ValS=["4","5","6"];
	valF=["7","8"];
     vals = [];
	 var t =  $("#soo option:selected").text();  
	$('#rt').html(t); 
     
     $('#foo option').each(function(){
	vals.push($(this).text());
         if( t == "Orange" && $.inArray($(this), ValO) == -1){
             $(this).hide();
         }
         else{
             $(this).show();
         }
      
   
  
});
      $('#result').html(vals.join(", "));

    }).trigger('change');
    
 
})