Question

我的页面上有这个

<script id="score" type="text/template">
    <select name="scoreSelector">
        <option value="" disabled selected>Your Score</option>
        <option id="val1" value="0">Quarter</option>
        <option id="val2" value="0">Half</option>
        <option id="val3" value="0">Three Quarter</option>
    </select>
</script>

如何设置每个选项值？

E.g。

<script>
    $('select[name=scoreSelector]').val('0.25');
</script>

由于上面的select在<script id="score" type="text/template">内，我如何使用jQuery动态设置值？

Answer 1

@ RayonDabre解决方案的演示：

＆＃13;

var vals = [null, 1 / 4, 1 / 2, 3 / 4];
$('select[name="scoreSelector"] option').each(function(i, o) {
  $(o).val(vals[i]);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="scoreSelector">
  <option value="" disabled selected>Your Score</option>
  <option id="val1" value="0">Quarter</option>
  <option id="val2" value="0">Half</option>
  <option id="val3" value="0">Three Quarter</option>
</select>

＆＃13;

Answer 2

var val = .25;

$('#score option[id]').attr('value', function () {
  var thisVal = val;
  val = val + .25
  return thisVal;
});

Answer 3

1）对于第一个选项，即选择分数应该没有值

$(document).ready(function() {
      var val = 0;
      $('select[name = "scoreSelector"] option').each(function(i) {
        if (i != 0) { 
          $(this).val(val += .25);
        }
      });
    });

2）如果第一个选项的值应该为零，那么。

$(document).ready(function() {
          var val = 0;
          $('select[name = "scoreSelector"] option').each(function(i) {

              $(this).val(val);
              val += .25;

      });
 });

这是工作小提琴 fiddle

Answer 4

您可以使用数字而不是数组，并在设置值时增加它。

不要迭代所有<option>，而是使用带有函数回调的val()。

＆＃13;

var val = 0, // For first option
  increment = 0.25;

$('select[name="scoreSelector"] option[id]').val(function() {
  return val += increment; // Increment and return
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="scoreSelector">
  <option value="" disabled selected>Your Score</option>
  <option id="val1" value="0">Quarter</option>
  <option id="val2" value="0">Half</option>
  <option id="val3" value="0">Three Quarter</option>
</select>

＆＃13;

Answer 5

您可以使用分配给每个选项元素的ID。

$('#val1').val(.25);
$('#val2').val(.5);
$('#val3').val(.75);

动态设置每个选项值

5 个答案: