我有一个这样的表格：
<form>
<input type="radio" name="adsType" id="adsType" value="request" />
<input type="radio" name="adsType" id="adsType" value="provide" />
<select name="transactionType" id="transactionType">
<option value="1">Sale</option>
<option value="2">Rent</option>
</select>
<input type="text" name="price" id="price" />
<input type="text" name="min_price" id="price" />
<input type="text" name="max_price" id="max_price" />
<input type="text" name="fare" id="fare" />
<input type="text" name="min_fare" id="min_fare" />
<input type="text" name="max_fare" id="max_fare" />
</form>
我想：
选择provide后点击Sale仅显示price输入，
选择provide后点击Rent仅显示fare输入，
选择request后点击Sale显示min_price和max_price输入，
选择request后点击Rent显示min_fare和max_fare输入
我正在尝试这个javascript：
//<![CDATA[
$(function(){
$('input[name=adsType]').change(function () {
if ($(this).val() == 'provide') {
$('select[name=transactionType]').change(function () {
if ($(this).val() == '1') { /* Provide type | Sale type => display 'price' input only */
$('#price').show();
} else {
$('#price').hide();
}
if ($(this).val() == '2') { /* Provide type | Rent type => display 'fare' input only */
$('#fare').show();
} else {
$('#fare').hide();
}
});
}
if ($(this).val() == 'request') {
if ($(this).val() == '1') { /* Request type | Sale type => display 'min_price' and 'max_price' inputs */
$('#min_price').show();
$('#max_price').show();
} else {
$('#min_price').hide();
$('#max_price').hide();
}
if ($(this).val() == '2') { /* Request type | Rent type => display 'min_fare' and 'max_fare' inputs */
$('#min_fare').show();
$('#max_fare').show();
} else {
$('#min_fare').hide();
$('#max_fare').hide();
}
});
}
});
});//]]>
但它没有返回好结果。请帮我编辑这段JavaScript代码！
答案 0 :(得分：1)
尝试：
$(document).ready(function () {
var radioValue = "request";
var transactionValue = 1;
$('input[name=adsType]').change(function () {
radioValue = $(this).val();
update();
});
$('select[name=transactionType]').change(function () {
transactionValue = parseInt($(this).val(), 10);
update();
});
function update() {
if (radioValue === "provide") {
if (transactionValue === 1) {
$('#price').show();
$('#min_price').hide();
$('#max_price').hide();
$('#fare').hide();
$('#min_fare').hide();
$('#max_fare').hide();
} else {
$('#price').hide();
$('#min_price').hide();
$('#max_price').hide();
$('#fare').show();
$('#min_fare').hide();
$('#max_fare').hide();
}
} else {
if (transactionValue === 1) {
$('#price').hide();
$('#min_price').show();
$('#max_price').show();
$('#fare').hide();
$('#min_fare').hide();
$('#max_fare').hide();
} else {
$('#price').hide();
$('#min_price').hide();
$('#max_price').hide();
$('#fare').hide();
$('#min_fare').show();
$('#max_fare').show();
}
}
}
update();
});
FORM HTML＆gt;请检查表单ID：min_price
<form>
<input type="radio" name="adsType" id="adsType" value="request" checked="checked" />
<input type="radio" name="adsType" id="adsType" value="provide" />
<select name="transactionType" id="transactionType">
<option value="1" selected="selected">Sale</option>
<option value="2">Rent</option>
</select>
<input type="text" name="price" id="price" />
<input type="text" name="min_price" id="min_price" />
<input type="text" name="max_price" id="max_price" />
<input type="text" name="fare" id="fare" />
<input type="text" name="min_fare" id="min_fare" />
<input type="text" name="max_fare" id="max_fare" />
</form>
答案 1 :(得分：1)
代码的if ($(this).val() == 'request') {内的选择框没有onchange事件。
我做了一些更改，例如将类all添加到输入#price #fare #max_price #max_fare #min_price #min_fare。
您可以浏览以下代码段中的代码。
//<![CDATA[
$(function() {
$('input[name=adsType]').change(function() {
$('.all').hide();
$('#transactionType').val('');
if ($(this).val() == 'provide') {
$('select[name=transactionType]').change(function() {
$('.all').hide();
if ($(this).val() == '1') { /* Provide type | Sale type => display 'price' input only */
$('#price').show();
}
if ($(this).val() == '2') { /* Provide type | Rent type => display 'fare' input only */
$('#fare').show();
}
});
}
if ($(this).val() == 'request') {
$('select[name=transactionType]').change(function() {
$('.all').hide();
if ($(this).val() == '1') { /* Request type | Sale type => display 'min_price' and 'max_price' inputs */
$('#min_price, #max_price').show();
}
if ($(this).val() == '2') { /* Request type | Rent type => display 'min_fare' and 'max_fare' inputs */
$('#min_fare, #max_fare').show();
}
});
};
});
});.all {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
request<input type="radio" name="adsType" id="adsType" value="request" /> provide
<input type="radio" name="adsType" id="adsType" value="provide" />
<select name="transactionType" id="transactionType">
<option value="" selected></option>
<option value="1">Sale</option>
<option value="2">Rent</option>
</select>
<input class='all' type="text" name="price" placeholder='price' id="price" />
<input class='all' type="text" name="min_price" placeholder='min_price' id="min_price" />
<input class='all' type="text" name="max_price" placeholder='max_price' id="max_price" />
<input class='all' type="text" name="fare" placeholder='fare' id="fare" />
<input class='all' type="text" name="min_fare" placeholder='min_fare' id="min_fare" />
<input class='all' type="text" name="max_fare" placeholder='max_fare' id="max_fare" />
</form>
答案 2 :(得分：1)
我相信这样的事情可能有所帮助。请参阅代码中的代码段和注释：
$(function() {
function toggleFields() {
// setup which fields to show in every case
var items = {
provide: {
1: '#price',
2: '#fare'
},
request: {
1: '#min_price, #max_price',
2: '#min_fare, #max_fare'
}
}
// get the selected values
var ad = $('input[name="adsType"]:checked').val(),
tr = $('select[name="transactionType"]').val();
// hide all and show required
$('[id*="price"], [id*="fare"]').hide();
$(items[ad][tr]).show();
}
// handler for changes
$('select[name="transactionType"], input[name="adsType"]').change(toggleFields);
// initial run
toggleFields();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>request <input type="radio" name="adsType" value="request" checked/></label>
<label>provide <input type="radio" name="adsType" value="provide" /></label>
<select name="transactionType" id="transactionType">
<option value="1" selected>Sale</option>
<option value="2">Rent</option>
</select>
<div>
<label id="price">price <input type="text" name="price" /></label>
<label id="min_price">min_price <input type="text" name="min_price" /></label>
<label id="max_price">max_price <input type="text" name="max_price" /></label>
</div>
<div>
<label id="fare">fare <input type="text" name="fare" /></label>
<label id="min_fare">min_fare <input type="text" name="min_fare" /></label>
<label id="max_fare">max_fare <input type="text" name="max_fare" /></label>
</div>
</form>