2つの選択フォームフィールドがあります。1つは「price_from」、もう1つは「price_to」です。問題は、たとえばprice_from「10000」とprice_to「1000」をユーザーが選択できないようにすることです。したがって、基本的に、「price_to」値に基づいて「price_to」フィールド値を設定するjavascript関数を見つける必要があります。つまり、price_from = "3000"を選択すると、price_fromフィールドに"4000"の値が表示されます。そしてもちろんその逆も同様です。誰かが「price_to」または「price_from」フィールドを再度変更した場合。
2 に答える
1
これを試して:
HTML:
<select id="from1" relatedTo="to1">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<select id="to1" relatedTo="from1">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<br/>
<select id="from2" relatedTo="to2">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
<select id="to2" relatedTo="from2">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
JavaScript:
// function to valide two selects
function validateSelects( fromSelector, toSelector ) {
// registering the change event to the "to" select
$( toSelector ).change(function() {
var fromSelector = "#" + $(this).attr( "relatedTo" );
var toSelector = "#" + $(this).attr( "id" );
// compares the value of the selected item with the from select
if ( $(this).val() > $( fromSelector ).val() ) {
// selects the value of the from select
$(this).val( $( fromSelector ).val() );
}
});
// puts the gui in a valid state
$( fromSelector ).change(function() {
var fromSelector = "#" + $(this).attr( "id" );
var toSelector = "#" + $(this).attr( "relatedTo" );
// compares if the value of this field is less than the value of the "to" select
if ( $(this).val() < $( toSelector ).val() ) {
// if so, change the value of the "to" select
$( toSelector ).val( $(this).val() );
}
});
}
validateSelects( "#from1", "#to1" );
validateSelects( "#from2", "#to2" );
jsFiddle: http: //jsfiddle.net/davidbuzatto/YNL6R/
編集:バインドされている選択を示すために、各選択にカスタム属性を挿入しました。
于 2012-07-23T19:27:12.070 に答える
0
そしてこれはhtmlコードです。@davidbuzattoコードは機能していますが、price_from10000とpriceto1000を選択してみてください。
<select name="pricesFrom" id="pricefrom"><option value="0" selected>Any</option><option value="500">500.00</option><option value="1000">1,000.00</option><option value="2000">2,000.00</option><option value="3000">3,000.00</option><option value="4000">4,000.00</option><option value="5000">5,000.00</option><option value="6000">6,000.00</option><option value="7000">7,000.00</option><option value="8000">8,000.00</option><option value="9000">9,000.00</option><option value="10000">10,000.00</option><option value="11000">11,000.00</option><option value="12000">12,000.00</option><option value="13000">13,000.00</option><option value="14000">14,000.00</option><option value="15000">15,000.00</option><option value="16000">16,000.00</option><option value="17000">17,000.00</option><option value="18000">18,000.00</option><option value="19000">19,000.00</option><option value="20000">20,000.00</option></select></label><label>Price to
<select name="pricesTo" id="priceto"><option value="0" selected>Any</option><option value="500">500.00</option><option value="1000">1,000.00</option><option value="2000">2,000.00</option><option value="3000">3,000.00</option><option value="4000">4,000.00</option><option value="5000">5,000.00</option><option value="6000">6,000.00</option><option value="7000">7,000.00</option><option value="8000">8,000.00</option><option value="9000">9,000.00</option><option value="10000">10,000.00</option><option value="11000">11,000.00</option><option value="12000">12,000.00</option><option value="13000">13,000.00</option><option value="14000">14,000.00</option><option value="15000">15,000.00</option><option value="16000">16,000.00</option><option value="17000">17,000.00</option><option value="18000">18,000.00</option><option value="19000">19,000.00</option><option value="20000">20,000.00</option></select>
于 2012-07-23T19:45:26.743 に答える