Question

我有两个选择表单字段。一个是“price_from”，另一个是“price_to”。问题是我想阻止用户选择例如price_from“10000”和price_to“1000”，所以基本上我必须找到一些javascript函数，它根据“price_to”值向前设置“price_to”字段值。即：如果我选择price_from =“3000”，price_from字段将显示“4000”的值。而且反之亦然。如果有人再次更改“price_to”或“price_from”字段。

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

修改：我在每个选择中插入了一个自定义属性，以表示它们被绑定的选择。

Answer 2

这是html代码。 @davidbuzatto您的代码正在运行，但尝试选择price_from 10000，价格为1000，您将看到。

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

Javascript（jQuery）两个选择价格从/到范围

2 个答案: