使用 Javascript 处理 HTML 中的多个 <select> 元素
Handling multiple <select> elements in HTML using Javascript
我在 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>
据我了解,我应该为第二个 <select>
创建第二个不同的函数 SetImage2()
。否则,如果我的第二个 <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);">
您似乎不需要 select 上的名称属性,因此将其删除。这样,它后面的图像(也具有相同的名称属性)现在是具有该名称属性的第二个元素,将成为第一个。
<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>
我在 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>
据我了解,我应该为第二个 <select>
创建第二个不同的函数 SetImage2()
。否则,如果我的第二个 <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);">
您似乎不需要 select 上的名称属性,因此将其删除。这样,它后面的图像(也具有相同的名称属性)现在是具有该名称属性的第二个元素,将成为第一个。
<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>