如何根据javascript中选择单选按钮的下拉列表在文本框中显示相应的值
How to display the corresponding values in the text box depending on drop down list on selecting radio button in javascript?
我正在创建一个表单,要求使用单选按钮选择学位。根据所选单选按钮,下拉列表中的值会发生变化。现在我想在文本框中显示一些值,具体取决于从下拉列表中选择的选项。
在这里,我可以在选择单选按钮时更改下拉列表中的值,但不能在从下拉菜单中选择值时显示在文本框中。这是我的java脚本代码:
请选择您的学位UGPG
<fieldset id="branch"> <legend>Please select your degree</legend> <select name="branch" id="degreepg" size="1"> <option value="00">Select Degree First</option> </select> </fieldset> <fieldset id="semester"> <legend>Semester</legend> <input type="text" name="semester" id="textbox" size="1"/> </fieldset> </div>
java脚本函数:
函数SetbranchBydegree(度({var下拉列表=document.getElementById("degreepg"(;
switch (degree.value) { case 'UG': { dropdown.options.length = 0; dropdown.options[dropdown.options.length] = new Option('Select One','0'); dropdown.options[dropdown.options.length] = new Option('B.Tech','1'); dropdown.options[dropdown.options.length] = new Option('B.E','2'); break; } case 'PG': { dropdown.options.length = 0; dropdown.options[dropdown.options.length] = new Option('Select One','0'); dropdown.options[dropdown.options.length] = new Option('M.Tech','3'); dropdown.options[dropdown.options.length] = new Option('M.C.A','4'); break; } default:{ dropdown.options.length = 0; dropdown.options[dropdown.options.length] = new Option('Select Degree First','00'); break; } } if(dropdown.selectedIndex==1) { textbox.value = "8"; }
else if(dropdown.selectedIndex==2)
{
textbox.value = "8"; }
else if(dropdown.selectedIndex==3)
{
textbox.value = "4"; }
else if(dropdown.selectedIndex==4)
{
textbox.value = "6"; }
}
document.getElementById ("textboxId").value = "value";
工作演示
您应该考虑将Options
放在一个对象中,而不是使用if语句链,这不仅更容易查看,而且更容易在以后进行扩展,并且您正在缓存值。
(function() {
var options = {
UG: [
new Option('Select One', '0'),
new Option('B.Tech', '1'),
new Option('B.E', '2')],
PG: [
new Option('Select One', '0'),
new Option('M.Tech', '3'),
new Option('M.C.A', '4')],
fallback: [
new Option('Select Degree First', '00')]
}
var SetBranchBydegree = function(degree) {
var dropdown = document.getElementById("degreepg");
if (options[degree] !== undefined) {
dropdown.options = options[degree];
} else {
dropdown.options = options.fallback;
}
}
var init = function() {//Setup listeners
$("#gereepg").change(function(event) {
var textBox = $("#textbox"), //The textbox with id textbox
index = event.target.index;//selected index
if (index == 1 || index == 2) {
textbox.val("8");
}
else if (index == 3) {
textbox.val("4");
}
else if (index == 4) {
textbox.val("6");
}
});
}
$(document).ready(init);//run the init method when the site has loaded.
})();
要更改文本框的值,您需要监听select的onChange事件。这可以通过简单地添加一个属性onChange="javascriptMethod(This("来完成,但通常不建议这样做,因为它会促进全局范围的污染。上面是一个使用jQuery执行此操作的示例;
相关文章:
- 为什么在页面上单击的先前链接的文本显示在 AJAX 请求中
- JavaScript NaN错误,输入文本显示为NaN
- 关于socket.io实时文本显示的问题
- 如何使用javascript使文本显示在文本字段中
- 在它们之间切换时,jQuery 文本显示在活动文本下方
- 使用 ajax 乱码文本显示图像
- 带有文本显示js功能的图像映射 - 某些部分不显示
- 来自 Ajax 请求的文本显示不正确
- 如何使用 JavaScript 使文本显示
- 是否可以将元素内部的文本显示在 ::在 css 之前
- on更改文本框的文本显示在另一个文本框上
- 在文本显示在Scroll上之前在页面上隐藏文本的问题
- 使用带文本显示的Jquery切换文本
- 如何使文本显示速度变慢
- 如何将图片添加到点击计数器文本显示<图像><点击量>
- 文本显示有延迟
- 根据在另一个文本框中输入的文本显示文本框中的文本
- 如何从点击文本显示文件浏览器,并在悬停文本时将鼠标光标更改为指针
- 使文本显示为几行可点击的线条
- 如何使文本显示