javascript - 更改另一个 <select> 元素的 <select> onchange 中的元素

Question

所以基本上我有 2 <select>元素，我想要的是用户在第一个 <select> 中选择一个选项然后是第二个 <select>根据所选内容更改其选项。第二个<select>是空的，当第一个<select>得到改变它需要添加 <options>到第二个<select> .

HTML 第一选择:

<select name="roof_width" onChange="getWidth(this.selectedIndex)" value="3" class="content_selectinput" id="select_width">
    <?php
        $i = 0;
        $x = 2;
        while(isset($dak_breedte[$i]))
        {
            if(isset($roof_width_index) && $roof_width_index == $i)
            {
                echo"<option value='$i' id='$i' selected='Selected'>".$dak_breedte[$i]." Meter </option>";
                $i++;
            }                   
            else
            {
                echo"<option value='$x'>".$dak_breedte[$i]." Meter</option>";
                $i++;
            }
        }
    ?>
</select>

HTML 第二次选择:

<select name="NokBreedte" onClick="ridgeCheck()" value="3" class="content_selectinput" id="select_ridge" >
</select>

JavaScript:

function getWidth(index)
{
    ridge_min = index - 10;
    ridge_max = index + 10
    ridge_select = document.getElementById("select_ridge");
    for(i = 0; i <= 99; i++)
    {
        if(i < ridge_min || i > ridge_max)
        {
            ridge_select.add(ridge_values[i]);
        }
    }
}

第二个的文本值 <select>存储在一个数组中。我在网上搜索了一段时间，也用 jQuery 尝试过，但没有任何效果。

要清楚，我需要的是:

当用户更改第一个 <select>第二个<select>需要直接改。

Answer 1

如果您使用的是 jquery，请用这个替换您的函数

function getWidth(){
    var index = $('#select_width').val();
    ridge_min = index - 10;
    ridge_max = index + 10

    var options = '';


    for(i = 0; i <= 99; i++)
    {
        if(i > ridge_min || i < ridge_max)
        {
            options += "<option>" + ridge_values[i] + "</option>";
        }
     }

     $('#select_ridge').html(options);
}

也改变

getWidth(this.selectedIndex)

到

getWidth()

更新

抱歉再次修改，但您使用了以下条件错误。

if(i < ridge_min || i > ridge_max)

应该是

if(i > ridge_min || i < ridge_max)