CODEWITHSUNDEEP
phpjavascripthtml-select
Son of Man
Son of Man

Reputation: 117

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.

Upvotes: 2

Views: 2559

Answers (4)

Achshar
Achshar

Reputation: 5253

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"

Upvotes: 2

RobG
RobG

Reputation: 147523

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.

Upvotes: 2

bbg
bbg

Reputation: 3080

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

Upvotes: 3

sushil bharwani
sushil bharwani

Reputation: 30207

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.

Upvotes: -1

Related Questions