使用Javascript处理HTML中的多个<select>元素

问题描述

我在Blogger的HTML界面中混合使用了JavaScript和HTML，以创建下拉菜单功能，可循环浏览图片。忍受我尽管我知道一般的编码方式，但是我不了解JavaScript或HTML。这是我的简化代码：

<script language="javascript">
  function setimage(select) {
    var image = document.getElementsByName("image-swap")[0];
    image.src = select.options[select.selectedindex].value;
  }
</script><br />

<select id="all_population" name="all_population" onchange="setimage(this);">
  <option value="">Select One</option>
  <option value="https://1.bp.blogspot.com/-aq1gUvq3RH4/X0buRMjyb4I/AAAAAAAAA1c/xaLW53hBW50oR5nncbAxMpAzhVbZGQO8wCLcBGAsYHQ/s1530/06_bar_chart_incomexAmerican%2BIndian.png;">American Indian</option>
  <option value="https://1.bp.blogspot.com/-EDsska671rY/X0budvqlQ-I/AAAAAAAAA1w/F-c6rmlpudk0SaOgMvi27biWIabYIW_5ACLcBGAsYHQ/s1530/06_bar_chart_incomexAsian.png;">Asian</option>
</select><br />

<div class="separator" style="clear: both; text-align: center;">
  <img data-original-height="1314" data-original-width="1530" height="344" name="image-swap" src="" width="400" />
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>

<script language="javascript">
  function setimage2(select) {
    var image = document.getElementsByName("young_adult")[0];
    image.src = select.options[select.selectedindex].value;
  }
</script><br />

<select id="income_race" name="young_adult" onchange="setimage2(this);">
  <option value="">Select One</option>
  <option value="https://1.bp.blogspot.com/-tfwwzefpeiU/X0fSa5PcqwI/AAAAAAAAA2o/fE63pI0YCm4ooIu8PPN49_ilI6PbaV-IQCLcBGAsYHQ/s1530/06.2_bar_chart_incomexAmerican%2BIndian_young.png;">American Indian</option>
  <option value="https://1.bp.blogspot.com/-FE6xtPVG_V8/X0fSldTMyeI/AAAAAAAAA2s/3UlvT5CvmyEDiUThPfs8wfJOdTdQmfvzgCLcBGAsYHQ/s1530/06.2_bar_chart_incomexAsian_young.png;">Asian</option>
</select><br />

<div class="separator" style="clear: both; text-align: center;">
  <img data-original-height="1314" data-original-width="1530" height="344" name="young_adult" src="" width="400" />
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>

据我了解，我应该为第二个Setimage2()创建另一个不同的功能<select>。否则，如果我的第二个<select>引用了Setimage()，则<select>会将图像设置在第一个<select>之下（这是最初发生的情况）。但是，这样做时，当我循环浏览第二个<select>时什么也没有发生。据我了解，我使用的逻辑与第一个<select>相同，因此我不确定为什么第二个<select>不会在其下方生成图像。

如果有人可以提供一些见识，我很乐意。干杯！

解决方法

在您的第一个功能中，您具有：

var image = document.getElementsByName("image-swap")[0];

这是指第一个元素，具有相应的name属性，该属性是<img>：

<img data-original-height="1314" data-original-width="1530" height="344" name="image-swap" src="" width="400" />

在setImage2中，您拥有：

var image = document.getElementsByName("young_adult")[0];

这是指第一个元素，具有相应的name属性，该属性是<select>：

<select id="income_race" name="young_adult" onchange="setImage2(this);">

您似乎在选择项上不需要name属性，因此将其删除。这样，紧随其后的图像（也具有相同的名称属性）现在将成为具有该名称属性的第二个元素。

<script language="javascript">
  function setImage(select) {
    var image = document.getElementsByName("image-swap")[0];
    image.src = select.options[select.selectedIndex].value;
  }
</script><br />

<select id="all_population" name="all_population" onchange="setImage(this);">
  <option value="">Select One</option>
  <option value="https://1.bp.blogspot.com/-aq1gUvq3RH4/X0buRMjyb4I/AAAAAAAAA1c/xaLW53hBW50oR5nncbAxMpAzhVbZGQO8wCLcBGAsYHQ/s1530/06_bar_chart_incomexAmerican%2BIndian.png;">American Indian</option>
  <option value="https://1.bp.blogspot.com/-EDsska671rY/X0budvqlQ-I/AAAAAAAAA1w/F-c6rmlpudk0SaOgMvi27biWIabYIW_5ACLcBGAsYHQ/s1530/06_bar_chart_incomexAsian.png;">Asian</option>
</select><br />

<div class="separator" style="clear: both; text-align: center;">
  <img data-original-height="1314" data-original-width="1530" height="344" name="image-swap" src="" width="400" />
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>

<script language="javascript">
  function setImage2(select) {
    var image = document.getElementsByName("young_adult")[0];
    image.src = select.options[select.selectedIndex].value;
  }
</script><br />

<select id="income_race" onchange="setImage2(this);">
  <option value="">Select One</option>
  <option value="https://1.bp.blogspot.com/-tfwwZefpeiU/X0fSa5PcqwI/AAAAAAAAA2o/fE63pI0YCm4ooIu8PPN49_ilI6PbaV-IQCLcBGAsYHQ/s1530/06.2_bar_chart_incomexAmerican%2BIndian_young.png;">American Indian</option>
  <option value="https://1.bp.blogspot.com/-FE6xtPVG_V8/X0fSldTMyeI/AAAAAAAAA2s/3UlvT5CvmyEDiUThPfs8wfJOdTdQmfvzgCLcBGAsYHQ/s1530/06.2_bar_chart_incomexAsian_young.png;">Asian</option>
</select><br />

<div class="separator" style="clear: both; text-align: center;">
  <img data-original-height="1314" data-original-width="1530" height="344" name="young_adult" src="" width="400" />
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>

参考：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

,

问题在于您的属性name="young_adult"。您正在使用document.getElementsByName("young_adult")[0]访问元素。 但是索引[0]是<select>而不是<img>，因为<img>仅在<select>之后，因此不起作用。

要使其正常工作，您需要更改以下内容：

在JavaScript上将索引更改为[1]，它应该可以工作。

var image = document.getElementsByName("young_adult")[1];

<script language="javascript">
  function setImage(select) {
    var image = document.getElementsByName("image-swap")[0];
    image.src = select.options[select.selectedIndex].value;
  }
</script><br />

<select id="all_population" name="all_population" onchange="setImage(this);">
  <option value="">Select One</option>
  <option value="https://1.bp.blogspot.com/-aq1gUvq3RH4/X0buRMjyb4I/AAAAAAAAA1c/xaLW53hBW50oR5nncbAxMpAzhVbZGQO8wCLcBGAsYHQ/s1530/06_bar_chart_incomexAmerican%2BIndian.png;">American Indian</option>
  <option value="https://1.bp.blogspot.com/-EDsska671rY/X0budvqlQ-I/AAAAAAAAA1w/F-c6rmlpudk0SaOgMvi27biWIabYIW_5ACLcBGAsYHQ/s1530/06_bar_chart_incomexAsian.png;">Asian</option>
</select><br />

<div class="separator" style="clear: both; text-align: center;">
  <img data-original-height="1314" data-original-width="1530" height="344" name="image-swap" src="" width="400" />
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>

<script language="javascript">
  function setImage2(select) {
    var image = document.getElementsByName("young_adult")[1];
    image.src = select.options[select.selectedIndex].value;
  }
</script><br />

<select id="income_race" name="young_adult" onchange="setImage2(this);">
  <option value="">Select One</option>
  <option value="https://1.bp.blogspot.com/-tfwwZefpeiU/X0fSa5PcqwI/AAAAAAAAA2o/fE63pI0YCm4ooIu8PPN49_ilI6PbaV-IQCLcBGAsYHQ/s1530/06.2_bar_chart_incomexAmerican%2BIndian_young.png;">American Indian</option>
  <option value="https://1.bp.blogspot.com/-FE6xtPVG_V8/X0fSldTMyeI/AAAAAAAAA2s/3UlvT5CvmyEDiUThPfs8wfJOdTdQmfvzgCLcBGAsYHQ/s1530/06.2_bar_chart_incomexAsian_young.png;">Asian</option>
</select><br />

<div class="separator" style="clear: both; text-align: center;">
  <img data-original-height="1314" data-original-width="1530" height="344" name="young_adult" src="" width="400" />
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>