將JavaScript轉換爲jQuery，文本框的下拉控制功能

Question

我剛開始學習jQuery，想知道是否有人可以幫我弄清楚如何將這個JavaScript轉換爲jQuery。這應該正在做的是得到下拉#transfertype以及文本框#purchaseprice。然後，下拉列表中的每個數字與#purchaseprice應如何操作以及文本框中自動打印的內容（如果有的話）相關聯。

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可以大大簡化代碼：

$(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>

---

解決方案使用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>