Javascript（jQuery）兩個選擇價格從/到範圍

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>