我刚刚开始学习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("");
}
});
&#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;
答案 0 :(得分: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);
};
});
});
&#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
的解决方案:
$(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;