I want to have one select list populated with different values (price) depending on which option was chosen in other select list (sale or rent).  The procedure of the code looks ok what the logic refers but it is not working

So what I have done is first create the arrays for sale and rent.

Then get the jquery and do an change event to pick which selection was made.

then a Switch statement that should populate the select list in question, but it is not showing anything. While jquery is a library for javascript I dont know if mixing them like I have done is alright:

$('#transaction').change(function(){ $value = $('#transaction').val(); var sale = []; for (var i = 350000; i <= 2000000; i+100000) { sale.push(i); } var rent = []; for (var i = 500; i <= 6000; i+100) { rent.push(i); } switch($value) { case 'sale': $.each(sale, function(key, value){ $('#price').append('<option value="' + index+ '">' + value + '</option>') break; case 'rent': break; }); // end of each  } // end of switch }) ; //end of jquery snippet

<div class="row"> <div class="col-md-2 col-md-offset-1"> <div class="form-group"> {{Form::label('transaction', 'Transaction')}} <select name="transaction" id="transaction" class="form-control"> <option value="select">Select</option> <option value="sale">Sale</option> <option value="rent">Rent</option> <option value="holiday">Holiday</option> </select> </div> </div> <div class="col-md-2"> <div class="form-group"> {{Form::label('price', 'Price')}} <select name="price" id="price" class="form-control"> </select> </div> </div>