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)

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

更改另一个</select>元素的<select> onchange中的项目

2 个答案: