比较和设置 select 下拉值

Question

我有两个具有一系列价格值的 select 下拉菜单。 第一个标记为“Price From”，第二个标记为“Price To”。我创建了一个事件侦听器来确定“Price From”值何时发生变化，并且在此事件侦听器中我想检查所选值是否大于“Price To”值。如果是，则将“Price To”值更改为大于“Price From”值的值。否则不做任何事情。

这是 HTML。

“价格来自” HTML：

<select id="price_from">
    <option selected value="0">Any</option>
    <option value="1000">1000</option>
    <option value="2000">2000</option>
    <option value="3000">3000</option>
    <option value="4000">4000</option>
    <option value="5000">5000</option>
    <option value="6000">6000</option>
    <option value="7000">7000</option>
    <option value="8000">8000</option>
    <option value="9000">9000</option>
    <option value="10000">10 000</option>
    <option value="12500">12 500</option>
    <option value="15000">15 000</option>
    <option value="17500">17 500</option>
    <option value="20000">20 000</option>
    .
    .                                   
</select> 

“价格” HTML：

<select id="price_to">
    <option selected value="100000">Any</option>
    <option value="1000">1000</option>
    <option value="2000">2000</option>
    <option value="3000">3000</option>
    <option value="4000">4000</option>
    <option value="5000">5000</option>
    <option value="7500">7500</option>
    <option value="10000">10 000</option>
    <option value="12500">12 500</option>
    <option value="15000">15 000</option>
    <option value="17500">17 500</option>
    <option value="20000">20 000</option>
    <option value="22500">22 500</option>
    .
    .
    .                                           
</select>  

我上面描述的事件监听器：

document.getElementById("price_from").addEventListener("change", function(){

    var price_to_select = document.getElementById("price_to"); //The "Price To" select dropdown
    var price_to = price_to_select.value; //Get the current "Price To" value

    var price_from = this.value; //Get the current "Price From" value

    if(price_from >= price_to){ //Compare values
        //Loop through "Price To" values and as soon as a larger value than current 
        //"Price From" value has been found, set that value as the current "Price To" value
        for(var k=1; k<price_to_select.length; k++ ){ 
            price_to_k_value = price_to_select.options[k].value;

            if(price_to_k_value>price_from){
                price_to_select.value = price_to_k_value;
                break;
            }
        }
    }
});

所有这些都有效，除非“Price To”值大于 10000。

例如。 如果我将“Price To”设置为 3000，将“Price From”设置为 4000，则“Price To”正确设置为 5000。但是，一旦我将“Price To”设置为 7500，“Price From”设置为 8000 ，我希望“Price To”设置为 10000，但事实并非如此。

注意：我从k=1开始 for 计数器，因为我不想在 label "Any" 中包含第一个值。

Answer 1

我认为你只需要parseInt() ：

if (parseInt(price_to_k_value) > parseInt(price_from)) {
    // etc.
}

Answer 2

您需要确保检查 integer 比较与字符串比较。

要对此进行测试，请确保首先设置“to”值，然后开始将“from”更改为更高的值。

 document.getElementById('sel-price-from').addEventListener('change', function(e) { let fromVal = parseValue(e.target.value); let selTo = document.getElementById('sel-price-to'); let toVal = parseValue(selTo.value); if (toVal < fromVal) { let opts = selTo.getElementsByTagName('option'); for (let i = 1; i < opts.length; i++) { let value = parseValue(opts[i].value); if (value > fromVal) { selTo.value = value break; } } } }); function parseValue(value) { return parseInt(value.replace(/\s+/g, ''), 10); }

 <label>Price from: </label> <select id="sel-price-from"> <option selected value="0">Any</option> <option value="1000">1000</option> <option value="2000">2000</option> <option value="3000">3000</option> <option value="4000">4000</option> <option value="5000">5000</option> <option value="6000">6000</option> <option value="7000">7000</option> <option value="8000">8000</option> <option value="9000">9000</option> <option value="10000">10 000</option> <option value="12500">12 500</option> <option value="15000">15 000</option> <option value="17500">17 500</option> <option value="20000">20 000</option> </select> <label>Price to: </label> <select id="sel-price-to"> <option selected value="100000">Any</option> <option value="1000">1000</option> <option value="2000">2000</option> <option value="3000">3000</option> <option value="4000">4000</option> <option value="5000">5000</option> <option value="7500">7500</option> <option value="10000">10 000</option> <option value="12500">12 500</option> <option value="15000">15 000</option> <option value="17500">17 500</option> <option value="20000">20 000</option> <option value="22500">22 500</option> </select>