如何根据在javascript中选择单选按钮时的下拉列表，在文本框中显示相应的值? [英] How to display the corresponding values in the text box depending on drop down list on selecting radio button in javascript?

问题描述

我正在创建一个表格，要求使用单选按钮选择学位.根据所选的单选按钮，下拉列表中的值会更改.现在，我想在文本框中显示一些值，具体取决于从下拉列表中选择的选项.

I am creating a form which ask to select degree using radio buttons. Depending on radio button selected, values in the drop down list changes. Now I want to display some value in the text box depending on the option selected from the drop down list.

在这里，我可以在选择单选按钮的下拉列表中更改值，但在从下拉菜单中选择值时无法显示在文本框中. 这是我的Java脚本代码:

Here I'm able to change the values in the drop down list on selecting radio button, but not able to display in text box on selecting values from drop down menu. Here is my java script code:

请选择你的学位 UG PG

Please select your Degree UG PG

    <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(degree){ var dropdown = document.getElementById("degreepg");

function SetbranchBydegree(degree) { var dropdown = 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";      
  }  

}

推荐答案

您应该考虑将Options放在对象中，而不是使用if语句链，不仅看起来更容易，而且也更容易以后再扩展，您就可以缓存这些值.

You should consider putting your Options in an object instead of using a chain of if statements, not only is it easier to look at, but it's also easier to extend later on and you are caching the values.

(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的示例；

For changing the value of the textbox you need to listen to the onChange event of the select. This can be done by simply adding an attribute onChange="javascriptMethod(this)", but this is generally not recommended because it promotes global scope pollution. Above is an example of doing it with jQuery;

这篇关于如何根据在javascript中选择单选按钮时的下拉列表，在文本框中显示相应的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！