HTML JavaScript Dropdown selectedIndex

Question

I'm trying to get the dropdown to change the textbox, but seem to be having issues.

<head>
    <title>DropDown</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.20" />
    <script type="text/javascript">
        function chkind() {
            var dropdown1 = document.getElementById('dropdown1');
            var textbox = document.getElementById('textbox');
            var a = dropdown1.options[dropdown1.selectedIndex];
            if(a == 0){
                textbox.value = "hi";
            } else if(a == 1) {
            textbox.value = "bye";
        }
    }
    </script>
</head>

<body>
    <select onchange="chkind()" id="dropdown1">
        <option>Hi</option>
        <option>Bye</option>
    </select><br />
    <input id="textbox" type="text" />
</body>

ADW · Accepted Answer · 2011-07-04 15:48:27Z

11

Probably just:

var a = dropdown1.selectedIndex;

if you're trying to check that the zeroth option is selected.

Either that, or give your options values in the HTML and check the values themself.

answered Jul 4, 2011 at 15:48

ADW

4,08019 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NakedBrunch · Accepted Answer · 2011-07-04 15:57:04Z

3

You need to select the value property as follows:

var a = dropdown1.options[dropdown1.selectedIndex].value;

answered Jul 4, 2011 at 15:57

NakedBrunch

49.5k14 gold badges75 silver badges98 bronze badges

Comments

lihnid · Accepted Answer · 2011-07-04 15:53:44Z

1

this should work. Please note that 'a' is the DOM element (Option)

function chkind(){
var dropdown1 = document.getElementById('dropdown1');
var textbox = document.getElementById('textbox');
var a = dropdown1.options[dropdown1.selectedIndex];
if(a.index == 0){
  textbox.value = "hi";
} else if(a.index == 1) {
  textbox.value = "bye";
}
}

or

 function chkind(){
    var dropdown1 = document.getElementById('dropdown1');
    var textbox = document.getElementById('textbox');
    if(dropdown1.selectedIndex == 0){
      textbox.value = "hi";
    } else if(dropdown1.selectedIndex == 1) {
      textbox.value = "bye";
    }
    }

answered Jul 4, 2011 at 15:53

lihnid

475 bronze badges

Comments

bigblind · Accepted Answer · 2011-07-04 15:59:53Z

1

I'd advice you to do it this way:

<head>
    <title>DropDown</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="generator" content="Geany 0.20" />
        <script type="text/javascript">
        function chkind(){
        var dropdown1 = document.getElementById('dropdown1');
        var textbox = document.getElementById('textbox');
        textbox.value=dropdown1.value;
        }
        </script>
    </head>
    <body>
    <select onchange="chkind()" id="dropdown1"><option value='Hi'>Hi</option><option value = 'Bye'>Bye</option></select><br /><input id="textbox" type="text" />
    </body>

the changes to the code:

First of all, take a look at the select box, all the option tags now have a 'value' attribute. This tells the browser what the value the input should have when a certain option is selected. You can also use this to your advantage to set shorter values than the content of the option, for example, when you have a country selection tool, one of your options could be <option value='US'>United Stated</option>.
In your script, you don't have an if-statement anymore, we just set the value of the text box to the value of your select box.

edited Jul 4, 2011 at 15:59

answered Jul 4, 2011 at 15:53

bigblind

12.9k14 gold badges72 silver badges132 bronze badges

1 Comment

yanike Over a year ago

This is another way I can go about it. Thanks!

Ovais Khatri · Accepted Answer · 2011-07-04 15:51:11Z

0

var a = dropdown1.selectedIndex;
    if(a == 0){
      textbox.value = "hi";
    } else if(a == 1) {
      textbox.value = "bye";
    }
    }

answered Jul 4, 2011 at 15:51

Ovais Khatri

3,21118 silver badges15 bronze badges

Comments

Alex · Accepted Answer · 2011-07-04 15:52:21Z

0

You are storing the value of the selected item in the variable a so it can not be compared against its index. See below for the corrected version.

function chkind(){
    var dropdown1 = document.getElementById('dropdown1');
    var textbox = document.getElementById('textbox');
    var a = dropdown1.selectedIndex;

    if(a == 0){
      textbox.text = "hi";
    } else if(a == 1) {
      textbox.value = "bye";
    }
}

answered Jul 4, 2011 at 15:52

Alex

5,4991 gold badge34 silver badges38 bronze badges

Comments

Imran · Accepted Answer · 2017-08-18 06:32:10Z

0

$('#selectid option:nth-child(1)').attr('selected', 'selected');

answered Aug 18, 2017 at 6:32

Imran

2,1191 gold badge12 silver badges8 bronze badges

Collectives™ on Stack Overflow

HTML JavaScript Dropdown selectedIndex

7 Answers 7

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related