Установка значения выбора HTML с помощью 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>

Я имел дело с этой дилеммой почти 2 часа.Я не знаю, что с этим не так.То, что я пытаюсь сделать, это то, что когда пользователь нажимает кнопку, он меняет значение поля со списком на значение кнопки.Например, если я нажму кнопку 1, поле со списком будет иметь значение 1. Он работает с другими элементами HTML, но я не знаю, почему он здесь не применим.

Я очень новичок в программировании, поэтому не надоне будь груб со мной.Пожалуйста, не думайте, что я не приложил к этому усилий.Просто я не знаю, что я делаю честно.Пожалуйста, помогите.

Answer 1

Используйте свойство selectedIndex элемента select для установки выбранного индекса:

actionstars.selectedIndex = 0;

Только вместо того, чтобы установить его на 0, вам нужно выяснить, какое правильное значение есть у вашего btnValue.

Смотрите также здесь: http://www.w3schools.com/jsref/prop_select_selectedindex.asp

Answer 2

вы не можете установить значение select таким образом .. вам нужно будет добавить 'selected' в тег 'option', который должен быть выбран ..

РЕДАКТИРОВАТЬ я вижу, вы просили код .. вот он ..:)

JavaScript

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

Кстати, я думаю, вам нужно type="button" вместо type="submit"

Answer 3

Вам нужно перебрать опции, чтобы найти нужное значение, затем установить для его выбранного свойства значение true (и установить для свойства selected любого другого выбранного параметра значение false).Или вы можете установить свойство selectedIndex элемента select на индекс соответствующей опции.

Редактировать - простой пример

<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>

Существуют более эффективные и общие способы сделать это,выше показан основной подход.

Answer 4

Вы можете видеть это как ваш элемент выбора. Имеет количество опций и значения. Поэтому, если вы собираетесь установить значение элемента Select, оно не будет работать. Вам необходимо установить значение элемента options.