javascript - select2如何获取默认值

Question

我正在尝试从 select2 小部件获取 defaultSelected 值，以便我可以更改其背景颜色。

基本上是这样的:

1. 序列化表单。

2. 当输入(:文本和下拉列表)发生变化时，将新值与默认值进行比较并切换背景颜色。

文本框有效，但下拉列表无效。

一个简单的fiddle来说明问题。

我的问题是如何获取 select2 defaultValue 以便将其与新值进行比较？只有当新值是 !== 时才应切换背景颜色 默认值，如果重新选择默认值，则返回白色。

.text-changed {
    background-color: yellow!important;
}

$(".select2").on("change", function (e) {
    $(e.target).toggleClass("text-changed", e.target.value !== e.target.defaultSelected);
   // don't work with a select2
});

提前致谢

Answer 1

首先，您应该为 select 定义您的 default 值。第二:Select2 覆盖你真正的选择输入。您应该使用新生成的 HTML。

HTML

<form>
   <select class="select2 my-options">
       <option default value="0">Default</option>
       <option value="1">Option 1</option>
       <option value="2">Option 2</option>
       <option value="3">Option 3</option>
       <option value="4">Option 4</option>
       <option value="5">Option 5</option>
   </select>
   <p>
       <input type="text" />
   </p>
   <p>
       <input type="text" />
   </p>
   <p>
       <input type="text" />
   </p>
</form>

JS

$(".select2").select2();

$("form")
   .each(function () {
   $(this).data("serialized", $(this).serialize());
}).on("change input", function (e) {   
   $(e.target).toggleClass("text-changed", e.target.value !== e.target.defaultValue);
}).on("change", "select", function (e) {       
   $('.my-options a').toggleClass("text-changed", e.target.value !== $(this).find("option[default]").attr("value"));   
});

参见 this JSFIDDLE示例。

已编辑

还有一点:我不知道为什么，但在这种情况下，您应该使用 background 而不是 background-color。

CSS

.text-changed {
   background: yellow!important;
}