javascript - 更改项目换另一个元素

Question

所以基本上我有两个<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)

Answer 2

首先，您需要删除所有旧值（您应该在 onChange 函数中使用的所有代码）

//Clear the HTML Select DropdownList
$('#select_ridge option').empty();

});

在您需要添加新值之后

    var listvalues= new Array();    
    listvalues[0] = { Text: "val1", Value: "1" };
    listvalues[1] = { Text: "val2", Value: "2" };    
    listvalues[2] = { Text: "val3", Value: "3" };    

    $.each(listvalues, function (index) {            
            $("#select_ridge").append(GetOption(listvalues[index].Text, listvalues[index].Value));        
            });    
    });    
    function GetOption(text, value) {        
            return "<option value = '" + value + "'>" + text + "</option>"    
    }