Javascript 更改a<；选择>；一旦换了另一个<；选择>；要素

因此基本上我有2个

元素，我想要的是用户在第一个

中选择一个选项，然后第二个

根据选择的内容更改其选项。第二个

为空，当第一个

更改时，需要将

添加到第二个

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>

如果您使用的是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);
}

到

更新

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

if(i < ridge_min || i > ridge_max)

if（iridge_max）

应该是

if(i > ridge_min || i < ridge_max)

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

}))

之后，您需要添加新值

    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>"    
    }

var listvalues=new Array（）；
listvalues[0]={Text:“val1”，Value:“1”}；
listvalues[1]={Text:“val2”，Value:“2”}；
listvalues[2]={Text:“val3”，Value:“3”}；
$.each（列表值，函数（索引）{
$（“#选择#脊”）.append（GetOption（listvalues[index].Text，listvalues[index].Value））；
});    
});    
函数GetOption（文本，值）{
返回“+text+”
}
不应
脊线选择。添加（脊线值[i]）be<代码>选择脊线。添加（脊线值[i]）？我不这么认为，因为我声明ridge_select作为select元素。虽然我可能错了，但我想这会有用的。是的。。。我没有看到这一点，也不完全确定，但我认为
.remove（）
没有像您预期的那样工作。要删除select包含的选项，您需要调用
.empty（）
它将添加99，而不仅仅是RINGE_min和RINGE_max之间的选项，我确实能够添加东西，所以谢谢你！我两个都试过了，包括用&&更改| |，但使用文档。write我看到他循环了if 99次……使用我注意到的警报，他看到索引为“2”，无论我选择了什么，ridge|min为-8，ridge|max为210。。。。你知道我做错了什么吗？我改变了1个变量，使index和ridge_min变成了一个好的int，并且我在ridge_max上使用了parseInt（index）+10，现在可以工作了！非常感谢你！
getWidth()

if(i < ridge_min || i > ridge_max)

if(i > ridge_min || i < ridge_max)

//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>"    
    }