CODEWITHSUNDEEP
javascripthtmlcomboboxlabel
user1737250
user1737250

Reputation: 91

How do I change a text label based upon a combobox selection?

I have a combobox which has 10 entries in them and when you click one I want the Select entry to change based upon which one the user selects in the combobox. I have tried something similar to this but it doesnt seem to work.

    if (document.getElementById('label').selectedIndex = '0')
        {document.getElementById('labelname').innerHTML='choice1';}

            else if(document.getElementById('label').selectedIndex = '1')
                {document.getElementById('labelname').innerHTML='choice2';}

                    else(document.getElementById('label').selectedIndex = '2')
                        {document.getElementById('labelname').innerHTML='choice3';}

The problem is, whichever cam I click is always reverting to the last one giving me 'choice3' as my label for all 10 entries. Any help? I havent finished the code as these arent even working yet.

Upvotes: 1

Views: 3567

Answers (4)

Victor Soto
Victor Soto

Reputation: 234

I Found the answer:

Change

{document.getElementById('labelname').innerHTML=='choice1';}

to

{document.getElementById('labelname').innerHTML='choice1';}

Don't use == when you want to assign something to something

Can you provide details on which we can simulate this one? Include your html snippet and javascript. here http://jsbin.com/

Upvotes: 0

dan_fides
dan_fides

Reputation: 324

var selValue = document.getElementById('label').value;
document.getElementById('labelname').innerHTML = selValue;

For this to work "label" must look like this:

<select id="label">
    <option>Name one</option>
    <option>Name two</option>
    <option>Name three</option>
</select>

.value will give you inner text in <option selected>text in here is .value</option>

UPD. JS:

  var index = document.getElementById('label').selectedIndex;
  var labelName = document.getElementById('labelName');

  switch(index) {
    case 0:
      labelName.innerHTML = "cam1";
      break;

    case 1:
      labelName.innerHTML = "cam2";
      break;
  }

If you need more cases, just add as in example, case 2: ... case 3: ... and so on

p.s. switch() {} is much more beautiful than hierarchy of if ... else

Upvotes: 0

Mohsen Afshin
Mohsen Afshin

Reputation: 13436

You code have 2 main problems.

  1. For equality comparison you must use '==' not '=' . '=' will change the value
  2. The last 'else' must have an 'if' keyword

The correct is as below:

<html>
<head>
<script type="text/javascript">
function select() {

   if (document.getElementById('label').selectedIndex == '0')
        {document.getElementById('labelname').value ='choice1';}

            else if(document.getElementById('label').selectedIndex == '1')
                {document.getElementById('labelname').value ='choice2';}

                    else if(document.getElementById('label').selectedIndex == '2')
                        {document.getElementById('labelname').value ='choice3';} 

}
</script>       
</head>     

<body>

<select id="label">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<button onclick="select()">Select</button>

<input type="text" id="labelname" />

</body>


</html>

Upvotes: 1

Vipin CP
Vipin CP

Reputation: 3797

  if (document.getElementById('label').selectedIndex == '0')
        {document.getElementById('labelname').innerHTML='choice1';}

            else if(document.getElementById('label').selectedIndex == '1')
                {document.getElementById('labelname').innerHTML='choice2';}

                    else(document.getElementById('label').selectedIndex == '2')
                        {document.getElementById('labelname').innerHTML='choice3';}

Try this. use == to check value.

Upvotes: 0

Related Questions