JQuery 不更改选择框选项答案

【问题标题】：JQuery Not Changing Select Box OptionJQuery 不更改选择框选项
【发布时间】：2014-07-17 22:35:32
【问题描述】：

我有以下 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>

一切似乎都执行得很好，因为选择的类在点击时发生了变化，尽管两个框的选择框的值都没有改变。当我通过警报检查时，current_id 和 current_color 正在被很好地传递。

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

【问题讨论】：

我在您的 HTML 中没有看到 color_opt？
19 个金徽章还有这个问题？！
@doniyor，19 个著名问题 :-)
@WojciechFrącz 问这么多著名的问题并不容易，伙计
@doniyor 我试试 ;) 我留下了 color_opt 部分，它不相关。

标签： jquery html select

【解决方案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 属性。浏览器将显示为所选值的内容是不可预测的。

【讨论】：

如果在值更改时执行了其他 javascript，这会触发吗？
嗯似乎没有触发另一个 jquery，但它比我拥有的要好。谢谢。

【解决方案2】：

不用担心设置 'selected' 属性，您可以使用以下方法选择值

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

【讨论】：