我在一个程序中有两个选择字段。两个选择字段都包含值为 1 到 10 的选项。代码如下：
<select id="noc">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>我想使用 JavaScript 实现以下效果：
（仅作为示例）如果用户在第一个选择字段 ( id="noc") 中选择了选项 8，则在第二个选择字段 ( id="po") 中应该看不到 8 以下的选项（即 9 和 10 ）。
#c{
height: 160px;
width: 250px;
background-color: orange;
}
img{
width: 100%;
height: 100%;
}<div id="c">
<img src="https://restcountries.eu/data/caf.svg" alt="" preserveAspectRatio="none">
</div>在上面的片段中，我希望我的图像在不切割的情况下拉伸容器的尺寸。我不介意图像是否失去纵横比。
如果我使用 png 图像而不是 svg，图像会根据我的需要进行拉伸。但是在使用 svg 时，图像会保留其纵横比。
我发现如果我有一个 svg，我可以使用preserveAspectRatio如下 -
.c{
height: 160px;
width: 250px;
background-color: orange;
}
svg{
width: 100%;
height: 100%;
}Preserving aspect ratio -
<div class="c">
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="300" viewBox="0 0 1200 800">
<rect height="200" width="1200" y="0" x="0" fill="#003082"/>
<rect height="200" width="1200" y="200" x="0" fill="#FFF"/>
<rect height="200" width="1200" y="400" x="0" fill="#289728"/>
<rect …