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>

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

jQuery可以大大简化您的代码：

＆＃13;

$(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);
    };
  });
});

＆＃13;

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

＆＃13;

使用selectedIndex的解决方案：

＆＃13;

$(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);
    }
  });
});

＆＃13;

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

＆＃13;

将Javascript转换为jQuery，Dropdown控制Textbox的功能

1 个答案: