How to display the corresponding values in the text box depending on drop down list on selecting radio button in javascript?

Question

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.

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:

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 script function:

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";      
  }  

}

Answer 1

document.getElementById ("textboxId").value = "value";

WORKING DEMO

Answer 2

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.
})();

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;