Setting HTML select value using JavaScript

Question

index.php

<script type="text/javascript">
function setActionStar(btnValue) {
 var actionstar = document.getElementById('actionstars');

 alert(btnValue);
 alert(actionstar.value);

 actionstar.value = btnValue;
 return false;
}
</script>

<form> 
 <?php
  $actionstars = array("Jean Claude Van Damme", "Scott Adkins", "Dolph Lundgren", "Michael Jai White");

  $ctr = 1;
 ?>

 <select id="actionstars" name="actionstars">
  <?php
   foreach($actionstars as $as){
    echo "<option value=" . $ctr . " >" . $as . "</option>";
    $ctr++;
   }
  ?>
 </select>

 <br />

 <?php
  for($i=1; $i<= count($actionstars); $i++) {
 ?>
 <input type="submit" value="<?php echo $i; ?>" onclick="setActionStar(this.value);" />
 <?php
  }
 ?>
</form>

I've been dealing with this dilemma for almost 2 hours. I don't know what's wrong with this. What I'm trying to do is whenever the user clicks a button, it will change the combobox value to the value of the button. For example, if I hit button 1, the combobox will have the value 1. It's working with other HTML elements but I don't know why it's not applicable here.

I am very new to programming so don't be harsh to me. Please don't think I didn't do an effort on this. It's just I don't know what I am doing honestly. Please help.

@achshar - fairly common requirement, if the buttons have name and value attributes then the name and value of the one that is used to submit the form is sent too so the server can tell which one was used to submit the form. — RobG
– RobG, Commented Jun 29, 2011 at 6:16
@RobG hmm yes that would help identify which button was pressed but is there a use case for this? like when would it be useful in practical life to know if a form was submitted from one button or the other? its kind of rare i guess.. — Achshar
– Achshar, Commented Jun 29, 2011 at 7:16

bbg · Accepted Answer · 2011-06-29 05:41:53Z

3

Use the selectedIndex property of the select element to set the selected index:

actionstars.selectedIndex = 0;

Only instead of setting it to 0, you need to figure out what the right value is from your btnValue.

See also here: http://www.w3schools.com/jsref/prop_select_selectedindex.asp

answered Jun 29, 2011 at 5:41

bbg

3,1203 gold badges20 silver badges13 bronze badges

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

3 Comments

Son of Man Over a year ago

I did actionstars.selectedIndex = btnValue - 1; What happens is that after I hit the button it goes to the correct index but after half a second it goes back to the default index...

bbg Over a year ago

I'm not sure. What are you using for the combobox? Is it just a straight-up HTML select element, or is it enhanced with jQuery?

RobG Over a year ago

Change the input to type button. It is currently a submit button so the form is submitting right after the script finishes.

RobG · Accepted Answer · 2011-06-29 05:49:24Z

2

You need to loop through the options to find the one with the value you want, then set its selected property to true (and set the selected property of any other selected option to false). Or you can set the selectedIndex property of the select element to the index of the appropriate option.

Edit - simple example

<form>
  <select id="sel0" name="foo">
    <option selected>default
    <option value="a">a
    <option value="b">b
    <option value="c">c
  </select>
  <input type="button" onclick="setSelect('sel0','a')" value="Set to a">
  <input type="button" onclick="setSelect('sel0','b')" value="Set to b">
  <input type="button" onclick="setSelect('sel0','c')" value="Set to c">
  <br>
  <input type="reset">
</form>

<script type="text/javascript">
  function setSelect(id, value) {
    var sel = document.getElementById(id);
    var option, options = sel.options;
    var i = options.length;
    while (i--) {
      option = options[i];
      option.selected = (option.value == value)? true : false;
    }
  }
</script>

There are more efficient and generic ways of doing it, the above shows the basic approach.

edited Jun 29, 2011 at 5:49

answered Jun 29, 2011 at 5:41

RobG

148k32 gold badges180 silver badges216 bronze badges

1 Comment

Son of Man Over a year ago

Can you show that to me pls... I really don't know how to do that. I know its kinda too much to ask but I am bit running out of time... I need to submit this exercise for checking...

Achshar · Accepted Answer · 2011-06-29 05:52:57Z

2

you cannot set the value of a select like that.. you will need to add 'selected' in the 'option' tag that has to be selected..

EDIT i see you requested code.. here it is.. :)

the javascript

actionstar.value = function() {
    [].forEach.call(document.querySelectorAll('#actionstars option'), function(col) {
        if(col.value==btnValue) col.selected = true;
        else col.selected = false;
    });    
}

BTW i think you need type="button" instead of type="submit"

edited Jun 29, 2011 at 5:52

answered Jun 29, 2011 at 5:43

Achshar

5,3238 gold badges45 silver badges73 bronze badges

Comments

sushil bharwani · Accepted Answer · 2011-06-29 05:38:08Z

-1

You can see it as that your select element. Does have Number of options and they have values. So if you are going to set the value of Select element it wont work. You need to set the value of the options element.

answered Jun 29, 2011 at 5:38

sushil bharwani

30.2k30 gold badges98 silver badges130 bronze badges

Collectives™ on Stack Overflow

Setting HTML select value using JavaScript

4 Answers 4

3 Comments

Edit - simple example

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Edit - simple example

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related