Converting Javascript to jQuery, Dropdown controlling functionality of Textbox

Question

I have just started learning jQuery and was wondering if anyone could help me figure out how to convert this JavaScript into jQuery. What this should be doing is getting the dropdown #transfertype as well as the textbox #purchaseprice. Then each number in the index of the drop down is associated with how #purchaseprice should act and what is automatically printed in the textbox (if anything).

function pp(){
            var dropdown1 = document.getElementById('transfertype');
            var textbox = document.getElementById('purchaseprice');
            if(dropdown1.selectedIndex == 0){
                textbox.value = "";
                document.getElementById("purchaseprice").readOnly = false;
            } else if(dropdown1.selectedIndex == 1) {
                textbox.value = "";
                document.getElementById("purchaseprice").readOnly = false;
            } else if(dropdown1.selectedIndex == 2) {
                textbox.value = "Gift";
                document.getElementById("purchaseprice").readOnly = true;
            } else if(dropdown1.selectedIndex == 3) {
                textbox.value = "Trade";
                document.getElementById("purchaseprice").readOnly = true;
            } else if(dropdown1.selectedIndex == 4) {
                textbox.value = "Repossession";
                document.getElementById("purchaseprice").readOnly = true;
            } else if(dropdown1.selectedIndex == 5) {
                textbox.value = "Court Order";
                document.getElementById("purchaseprice").readOnly = true;
            } else if(dropdown1.selectedIndex == 6) {
                textbox.value = "Inheritance";
                document.getElementById("purchaseprice").readOnly = true;
            } else if(dropdown1.selectedIndex == 7) {
                textbox.value = "Add Name";
                document.getElementById("purchaseprice").readOnly = true;
            } else if(dropdown1.selectedIndex == 8) {
                textbox.value = "Remove Name";
                document.getElementById("purchaseprice").readOnly = true;
            }
        }

<select id="transfertype">
  <option value="">Please Select
  <option value="Sale">Sale
  <option value="Gift">Gift
  <option value="Trade">Trade
  <option value="Repossession">Repossession
  <option value="Court Order">Court Order
  <option value="Inheritance">Inheritance
  <option value="Add Name">Add Name
  <option value="Remove Name">Remove Name
</select>

$(document).ready(function() {
  $('#transfertype').change(function() {
    $('#purchaseprice')
      .val($(this).val())
      .prop('readOnly', $(this).val()>'');
  });
  if $('#transfertype').val("Sale"){
    $('#purchaseprice').val("");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="purchaseprice">
<select id="transfertype">
  <option value="">Please Select
  <option value="Sale">Sale
  <option value="Gift">Gift
  <option value="Trade">Trade
  <option value="Repossession">Repossession
  <option value="Court Order">Court Order
  <option value="Inheritance">Inheritance
  <option value="Add Name">Add Name
  <option value="Remove Name">Remove Name
</select>

Answer 1

jQuery can greatly simplify your code:

$(document).ready(function() {
  $('#transfertype').change(function() {
    if($(this).val()==='' || $(this).val()==='Sale') {
      $('#purchaseprice').val('').prop('readOnly', false);
    }
    else {
      $('#purchaseprice').val($(this).val()).prop('readOnly', true);
    };
  });
});
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="purchaseprice">
<select id="transfertype">
  <option value="">Please Select
  <option value="Sale">Sale
  <option value="Gift">Gift
  <option value="Trade">Trade
  <option value="Repossession">Repossession
  <option value="Court Order">Court Order
  <option value="Inheritance">Inheritance
  <option value="Add Name">Add Name
  <option value="Remove Name">Remove Name
</select>

---

Solution using selectedIndex:

$(document).ready(function() {
  $('#transfertype').change(function() {
    var opt= ['','','Gift','Trade','Repossession','Court Order','Inheritance','Add Name','Remove Name'];
    if(this.selectedIndex < 2) {
      $('#purchaseprice').val(opt[this.selectedIndex]).prop('readOnly', false);
    }
    else {
      $('#purchaseprice').val(opt[this.selectedIndex]).prop('readOnly', true);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="purchaseprice">
<select id="transfertype">
  <option value="">Please Select
  <option value="Sale">Sale
  <option value="Gift">Gift
  <option value="Trade">Trade
  <option value="Repossession">Repossession
  <option value="Court Order">Court Order
  <option value="Inheritance">Inheritance
  <option value="Add Name">Add Name
  <option value="Remove Name">Remove Name
</select>