Question

我有以下jquery代码来更改我选择的选择框选项。

   $(function () {

      var prev_id = -1;          
      $('.color_opt').click(function() { 
        if (prev_id != -1)
        {
          $("#"+prev_id).removeClass('opt_sel');
        }
        var current_id = $(this).attr('id');
        var current_color = $(this).data('color');
        $("#product-select-option-0[value=" + current_color +"]").prop("selected","selected") ;
        $("#product-select[value=" + current_id +"]").prop("selected","selected") ;

        $(this).addClass('opt_sel');
        prev_id = current_id;
      });


    });

这是我的HTML

<div id="original_selector" class="select clearfix">
            <div class="selector-wrapper">
                <label>Color</label>
                <select id="product-select-option-0" data-option="option1" class="single-option-selector">
                    <option value="Red">Red</option>
                    <option value="Blue">Blue</option>
                    <option value="Orange">Orange</option>
                </select>
            </div>
            <select id="product-select" name="id" style="display:none">
              <option value="849558613">Red - $29.99</option>            
              <option value="849558617">Blue - $24.99</option>             
              <option value="849558621">Orange - $29.99</option>             
            </select>
        </div>

所有内容似乎都正常运行，因为所选类正在更改onclick，尽管选择框的值对于任何一个框都没有变化。当我通过警报检查时，current_id和current_color正好被传递。

关于为什么我的选择框选项没有改变的任何想法？

Answer 1

请勿使用prop选择所需的值。请改用val()。

$(function () {
  var prev_id = -1;          
  $('.color_opt').click(function() { 
    if (prev_id != -1)
    {
      $("#"+prev_id).removeClass('opt_sel');
    }
    var current_id = $(this).attr('id');
    var current_color = $(this).data('color');
    $("#product-select-option-0").val(current_color);
    $("#product-select").val(current_id);

    $(this).addClass('opt_sel');
    prev_id = current_id;
  });
});

使用prop时，多个选项可能会获得selected属性。浏览器将显示的选定值是不可预测的。

Answer 2

不要担心设置'selected'属性，而只需使用以下

选择值

$("#product-select-option-0").val(current_color);
$("#product-select").val(current_id);

JQuery不更改选择框选项

2 个答案: