Setting HTML select value using JavaScript

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.

---

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

---

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.

---

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"

---

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.