时间戳

首页 > 解决方案 > 比较和设置选择下拉值

javascript - 比较和设置选择下拉值

问题描述

我有两个选择下拉菜单，其中包含一系列价格值。第一个标记为“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，但事实并非如此。

注意：我从 开始 for 计数器k=1，因为我不想包含带有标签“Any”的第一个值。

标签： javascripthtml

解决方案

我认为你只需要parseInt()：

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

推荐阅读