所以我不知道标题是否措辞正确，但基本上我想要做的是在下拉列表中选择某些内容时，它会运行一个函数，然后选择其描述和在下拉列表下打印出来。
到目前为止，这是我的剧本：
window.onload = function() {
var selectElement06 = document.getElementById("postalInfo");
var paraElement06 = document.getElementById("ch06Para");
if (selectElement06) {
selectElement06.addEventListener('change', descPostalCode);
}
function descPostalCode() {
var select = "Please choose a code";
var usCode = "US Codes are 5 numbers optionally followed by a dash and 4 more numbers. Spaces may appear surrounding the dash (like so '00000 - 0000 or 00000-0000' but no where else)";
var canCode = "Postal codes in Canada do not include the letters D, F, I, O, Q, or U, as the OCR equipment used in automated sorting could easily confuse them with other letters and digits. The letters W and Z are used, but are not currently used as the first letter. The Canadian Postal Codes use alternate letters and numbers (with a space after the 3rd character) in this format: A9A 9A9 Ref: https://en.wikipedia.org/wiki/Postal_code#Reserved_characters";
var ukCode = "The format is as follows, where A signifies a letter and 9 a digit: <br /> <pre> Format Coverage Example<br />AA9A 9AA WC postcode area; EC1–EC4, NW1W, SE1P, SW1 EC1A 1BB<br />A9A 9AA E1W, N1C, N1P W1A 0AX<br />A9 9AA B, E, G, L, M, N, S, W M1 1AE<br />A99 9AA B, E, G, L, M, N, S, W B33 8TH<br />AA9 9AA All other postcodes CR2 6XH<br />AA99 9AA All other postcodes DN55 1PT<br /> <br /> </pre> Notes:<br /> As all formats end with 9AA, the first part of a postcode can easily be extracted by ignoring the last three characters Areas with only single-digit districts: BR, FY, HA, HD, HG, HR, HS, HX, JE, LD, SM, SR, WC, WN, ZE (although WC is always subdivided by a further letter, e.g. WC1A).<br /> Areas with only double-digit districts: AB, LL, SO.<br /> Areas with a district '0' (zero): BL, BS, CM, CR, FY, HA, PR, SL, SS (BS is the only area to have both a district 0 and a district 10).<br /> The following central London single-digit districts have been further divided by inserting a letter after the digit and before the space: EC1–EC4 (but not EC50), SW1, W1, WC1, WC2, and part of E1 (E1W), N1 (N1C and N1P), NW1 (NW1W) and SE1 (SE1P).<br /> The letters QVX are not used in the first position.<br /> The letters IJZ are not used in the second position. <br /> The only letters to appear in the third position are ABCDEFGHJKPSTUW when the structure starts with A9A.<br /> The only letters to appear in the fourth position are ABEHMNPRVWXY when the structure starts with AA9A.<br /> The final two letters do not use the letters CIKMOV, so as not to resemble digits or each other when hand-written.<br /> Post code sectors are one of ten digits: 0 to 9 with 0 only used once 9 has been used in a post town, save for Croydon and Newport. Ref: https://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom";
var santaCode = " Canada Post introduced a special address for mail to Santa Claus, complete with its own postal code <br />SANTA CLAUS<br />NORTH POLE H0H 0H0<br />CANADA<br /><br />In French, Santa's name Père Noël translates as 'Father Christmas', addressed as:<br />PÈRE NOËL<br />PÔLE NORD H0H 0H0<br />CANADA<br /><br /><br />The postal code H0H 0H0 was chosen for this special seasonal use as it reads as 'Ho ho ho'.<br />The H0- prefix is an anomaly: the 0 indicates a very small, rural village, but H is used to designate Montreal, the second-largest city in Canada. As such, the H0- prefix is almost completely empty. H0M, assigned to the international Akwesasne tribal reserve on the Canada-US border, is the only other H0- postal code in active use. Ref https://en.wikipedia.org/wiki/Postal_codes_in_Canada#Santa_Claus";
//var output = document.getElementById("postalInfo").selectedIndex;
//alert(document.getElementsByTagName("option")[output].value);
}
}
注释掉的只是我用来确保它正常工作的快速警报。
这是我的HTML：
<p>What postal/zip code do you need information about?</p>
<select id="postalInfo" name="postalInfo">
<option value="">Select one...</option>
<option value="us">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="santa">Santa Claus</option>
</select>
现在我想要完成的是，当从下拉列表中选择美国时，该函数运行以调用变量usCode（描述）并将其输出到下拉列表中（不是在警报中，像我的测试一样）。我一直试图通过获取postalInfo id以及随后相应选项的值来确定它是否可行，然后找出输出匹配变量的方法，但是不能在生命中使用我搞清楚了。
答案 0 :(得分：0)
HTML：
<p>What postal/zip code do you need information about?</p>
<select id="postalInfo" name="postalInfo">
<option value="">Select one...</option>
<option value="us">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="santa">Santa Claus</option>
</select>
<p id="Description"></p>
JS：
window.onload = function() {
var selectElement06 = document.getElementById("postalInfo");
var paraElement06 = document.getElementById("ch06Para");
if (selectElement06) {
selectElement06.addEventListener('change', descPostalCode);
}
descPostalCode()
function descPostalCode() {
var select = "Please choose a code";
var usCode = "US Codes are 5 numbers optionally followed by a dash and 4 more numbers. Spaces may appear surrounding the dash (like so '00000 - 0000 or 00000-0000' but no where else)";
var canCode = "Postal codes in Canada do not include the letters D, F, I, O, Q, or U, as the OCR equipment used in automated sorting could easily confuse them with other letters and digits. The letters W and Z are used, but are not currently used as the first letter. The Canadian Postal Codes use alternate letters and numbers (with a space after the 3rd character) in this format: A9A 9A9 Ref: https://en.wikipedia.org/wiki/Postal_code#Reserved_characters";
var ukCode = "The format is as follows, where A signifies a letter and 9 a digit: <br /> <pre> Format Coverage Example<br />AA9A 9AA WC postcode area; EC1–EC4, NW1W, SE1P, SW1 EC1A 1BB<br />A9A 9AA E1W, N1C, N1P W1A 0AX<br />A9 9AA B, E, G, L, M, N, S, W M1 1AE<br />A99 9AA B, E, G, L, M, N, S, W B33 8TH<br />AA9 9AA All other postcodes CR2 6XH<br />AA99 9AA All other postcodes DN55 1PT<br /> <br /> </pre> Notes:<br /> As all formats end with 9AA, the first part of a postcode can easily be extracted by ignoring the last three characters Areas with only single-digit districts: BR, FY, HA, HD, HG, HR, HS, HX, JE, LD, SM, SR, WC, WN, ZE (although WC is always subdivided by a further letter, e.g. WC1A).<br /> Areas with only double-digit districts: AB, LL, SO.<br /> Areas with a district '0' (zero): BL, BS, CM, CR, FY, HA, PR, SL, SS (BS is the only area to have both a district 0 and a district 10).<br /> The following central London single-digit districts have been further divided by inserting a letter after the digit and before the space: EC1–EC4 (but not EC50), SW1, W1, WC1, WC2, and part of E1 (E1W), N1 (N1C and N1P), NW1 (NW1W) and SE1 (SE1P).<br /> The letters QVX are not used in the first position.<br /> The letters IJZ are not used in the second position. <br /> The only letters to appear in the third position are ABCDEFGHJKPSTUW when the structure starts with A9A.<br /> The only letters to appear in the fourth position are ABEHMNPRVWXY when the structure starts with AA9A.<br /> The final two letters do not use the letters CIKMOV, so as not to resemble digits or each other when hand-written.<br /> Post code sectors are one of ten digits: 0 to 9 with 0 only used once 9 has been used in a post town, save for Croydon and Newport. Ref: https://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom";
var santaCode = " Canada Post introduced a special address for mail to Santa Claus, complete with its own postal code <br />SANTA CLAUS<br />NORTH POLE H0H 0H0<br />CANADA<br /><br />In French, Santa's name Père Noël translates as 'Father Christmas', addressed as:<br />PÈRE NOËL<br />PÔLE NORD H0H 0H0<br />CANADA<br /><br /><br />The postal code H0H 0H0 was chosen for this special seasonal use as it reads as 'Ho ho ho'.<br />The H0- prefix is an anomaly: the 0 indicates a very small, rural village, but H is used to designate Montreal, the second-largest city in Canada. As such, the H0- prefix is almost completely empty. H0M, assigned to the international Akwesasne tribal reserve on the Canada-US border, is the only other H0- postal code in active use. Ref https://en.wikipedia.org/wiki/Postal_codes_in_Canada#Santa_Claus";
//var output = document.getElementById("postalInfo").selectedIndex;
//alert(document.getElementsByTagName("option")[output].value);
var option = document.getElementById("postalInfo").value;
//alert(option);
if(option == "us") // Better to use a Switch function. but this will work for now.
{
document.getElementById("Description").innerHTML = usCode;
}
else if(option == "canada")
{
document.getElementById("Description").innerHTML = canCode;
}
else if(option == "uk")
{
document.getElementById("Description").innerHTML = ukCode;
}
else if(option == "santa")
{
document.getElementById("Description").innerHTML = santaCode;
}
}
}
答案 1 :(得分：0)
window.onload = function() {
var selectElement06 = document.getElementById("postalInfo");
var paraElement06 = document.getElementById("ch06Para");
if (selectElement06) {
selectElement06.addEventListener('change', descPostalCode);
}
function descPostalCode() {
var select = "Please choose a code";
var usCode = "US Codes are 5 numbers optionally followed by a dash and 4 more numbers. Spaces may appear surrounding the dash (like so '00000 - 0000 or 00000-0000' but no where else)";
var canadaCode = "Postal codes in Canada do not include the letters D, F, I, O, Q, or U, as the OCR equipment used in automated sorting could easily confuse them with other letters and digits. The letters W and Z are used, but are not currently used as the first letter. The Canadian Postal Codes use alternate letters and numbers (with a space after the 3rd character) in this format: A9A 9A9 Ref: https://en.wikipedia.org/wiki/Postal_code#Reserved_characters";
var ukCode = "The format is as follows, where A signifies a letter and 9 a digit: <br /> <pre> Format Coverage Example<br />AA9A 9AA WC postcode area; EC1–EC4, NW1W, SE1P, SW1 EC1A 1BB<br />A9A 9AA E1W, N1C, N1P W1A 0AX<br />A9 9AA B, E, G, L, M, N, S, W M1 1AE<br />A99 9AA B, E, G, L, M, N, S, W B33 8TH<br />AA9 9AA All other postcodes CR2 6XH<br />AA99 9AA All other postcodes DN55 1PT<br /> <br /> </pre> Notes:<br /> As all formats end with 9AA, the first part of a postcode can easily be extracted by ignoring the last three characters Areas with only single-digit districts: BR, FY, HA, HD, HG, HR, HS, HX, JE, LD, SM, SR, WC, WN, ZE (although WC is always subdivided by a further letter, e.g. WC1A).<br /> Areas with only double-digit districts: AB, LL, SO.<br /> Areas with a district '0' (zero): BL, BS, CM, CR, FY, HA, PR, SL, SS (BS is the only area to have both a district 0 and a district 10).<br /> The following central London single-digit districts have been further divided by inserting a letter after the digit and before the space: EC1–EC4 (but not EC50), SW1, W1, WC1, WC2, and part of E1 (E1W), N1 (N1C and N1P), NW1 (NW1W) and SE1 (SE1P).<br /> The letters QVX are not used in the first position.<br /> The letters IJZ are not used in the second position. <br /> The only letters to appear in the third position are ABCDEFGHJKPSTUW when the structure starts with A9A.<br /> The only letters to appear in the fourth position are ABEHMNPRVWXY when the structure starts with AA9A.<br /> The final two letters do not use the letters CIKMOV, so as not to resemble digits or each other when hand-written.<br /> Post code sectors are one of ten digits: 0 to 9 with 0 only used once 9 has been used in a post town, save for Croydon and Newport. Ref: https://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom";
var santaCode = " Canada Post introduced a special address for mail to Santa Claus, complete with its own postal code <br />SANTA CLAUS<br />NORTH POLE H0H 0H0<br />CANADA<br /><br />In French, Santa's name Père Noël translates as 'Father Christmas', addressed as:<br />PÈRE NOËL<br />PÔLE NORD H0H 0H0<br />CANADA<br /><br /><br />The postal code H0H 0H0 was chosen for this special seasonal use as it reads as 'Ho ho ho'.<br />The H0- prefix is an anomaly: the 0 indicates a very small, rural village, but H is used to designate Montreal, the second-largest city in Canada. As such, the H0- prefix is almost completely empty. H0M, assigned to the international Akwesasne tribal reserve on the Canada-US border, is the only other H0- postal code in active use. Ref https://en.wikipedia.org/wiki/Postal_codes_in_Canada#Santa_Claus";
var select_value = document.getElementById('postalInfo').options[document.getElementById('postalInfo').selectedIndex].value ;
var code_for_load_info=select_value+'Code';
if(select_value==''){code_for_load_info='select';}
var current_info=eval(code_for_load_info);
document.getElementById('div_for_description').innerHTML=current_info;
}
}<p>What postal/zip code do you need information about?</p>
<select id="postalInfo" name="postalInfo">
<option value="">Select one...</option>
<option value="us">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="santa">Santa Claus</option>
</select>
<div id="div_for_description"></div>
答案 2 :(得分：0)
使用jQuery方法：
在您的＆＃39;选择＆＃39;之后添加一个ID为div的div收到消息：
<div id="message"></div>
并将脚本更改为以下内容 - 我已简化了这些消息，但您所包含的html现在应该正确呈现 - 您需要将Wiki链接更改为<a href='xxx'>link</a>
$(window).on('load', function () {
// When the selection changes
$('#postalInfo').on('change', function () {
// Get a reference to the message div
var message = $(document.getElementById('message'));
// Use switch/case instead of if : else statements - using the value of the option selected
switch ($(this).val()) {
// if the value selected is 'us'
case 'us':
// Put the message, as html, into the message div ... etc
message.html("This is the Html message for US");
break;
case 'canada':
message.html("This is the Html message for Canada");
break;
case 'uk':
message.html("This is the Html message for the United Kingdom");
break;
case 'santa':
message.html("This the Html message for Santa");
break;
default:
break;
}
});
});
从您的代码到问题，我假设您引用了jQuery。