如何选择下拉框的值时输出变量字符串
问题描述：
所以我不知道标题的写法是否正确，但基本上我想要做的是在下拉列表中选择某项内容时，运行一个函数，然后选择它的描述并在下拉列表下打印出来。如何选择下拉框的值时输出变量字符串
这里是我的脚本至今：
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，然后确定哪个对应选项的值，然后找出一种方法来输出匹配变量，但不能在我的生活中找到它。
答
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>
答
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;
}
}
}
答
使用jQuery的方法：
添加一个div下面ID您的“选择”接收消息：
<div id="message"></div>
并更改脚本如下 - 我已经简化了的消息，但你在HTML现在应呈现正确 - 你需要改变维基链接<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引用。