javascript - 如何通过jquery选择一个选项

Question

我有一个看起来像这样的选择表单：

<select multiple="multiple" id="id_color_id" name="color_id"">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Brown</option>
</select>

我想要做的是通过javascript选择上面的项目。这实际上是隐藏表单的一部分，所以我要做的就是利用表单的序列化部分。我认为在序列化之后破解它然后添加它会更容易，但我也想取消选择已经选择的任何选项。

所以两个问题：

1. 如何通过 javascript 选择选项。我只知道“红色”、“蓝色”或“棕色”。我也有一个查找字典，它也可以让我得到值。

2. 如何在选择上述选项之一之前取消选择所有选项。

这与：通过 JQuery 在选择中选择选项

Answer 1

本机Javascript：

var textToFind = 'Red';

var dd = document.getElementById('id_color_id');
for (var i = 0; i < dd.options.length; i++) {
    if (dd.options[i].text === textToFind) {
        dd.selectedIndex = i;
        break;
    }
}

或使用 jQuery：

$('#id_color_id option:contains('Blue')').prop('selected',true);

带变量：

var blue = "Blue";
$('#id_color_id option:contains(' + blue + ')').prop('selected',true);

并取消选择所有选定的选项：

本机Javascript：

var elements = document.getElementById("id_color_id").options;

    for(var i = 0; i < elements.length; i++){
       if(elements[i].selected)
        elements[i].selected = false;
    }

jQuery：

$("#id_color_id option:selected").removeAttr("selected");

Answer 2

根据内容选择选项（考虑您发布的内容就是您拥有的内容）

$("#id_color_id option:contains('Red')").prop('selected',true);

jsFiddle 演示

Answer 3

您可以使用.val()方法在选择框上设置值。运行此操作将重置任何先前选择的值，因此您无需执行任何特定操作即可完成该部分。您还可以使用数组来选择多个值，这可能很有趣，因为您使用的是多选。

$("#id_color_id").val(['1','2']);