使用JavaScript设置HTML选择值


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>

我已经处理这个难题将近两个小时了。我不知道这是怎么回事。我想做的是,每当用户单击按钮时,它都会将组合框值更改为按钮的值。例如,如果我点击按钮1,则组合框的值为1。它可以与其他HTML元素一起使用,但我不知道为什么它在这里不适用。

我对编程很陌生,所以不要对我苛刻。请不要认为我在这方面没有付出任何努力。只是我真的不知道自己在做什么。请帮忙。

使用select元素的selectedIndex属性设置所选索引:

actionstars.selectedIndex = 0;

只是您需要从btnValue中找出正确的值,而不是将其设置为0。

另请参见此处:http://www.w3schools.com/jsref/prop_select_selectedindex.asp

您需要循环浏览选项以找到具有所需值的选项,然后将其选定属性设置为true(并将任何其他选定选项的选定属性设置为false)。或者,您可以将select元素的selectedIndex属性设置为相应选项的索引。

编辑-简单示例

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

有更有效和通用的方法可以做到这一点,上面显示了基本方法。

您不能像那样设置select的值。。您需要在必须选择的"option"标记中添加"selected"。。

编辑我看到您请求的代码。。在这里..:)

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"

您可以将其视为您的选择元素。确实有许多选项,而且它们都有值。因此,如果您要设置Select元素的值,它将不起作用。您需要设置options元素的值。