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

所以有两个问题：

如何通过javascript选择一个选项。我所知道的只是“红色”，“蓝色”或“棕色”。我也有一个查找字典，可以为我提供价值。
如何在选择上述选项之前取消选择所有选项。

这与：Selecting options in a select via 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 Demo

Answer 3

您可以使用.val()方法在选择框中设置值。运行此命令将重置以前选择的任何值，因此您无需执行任何特定任务来完成该部分。您也可以使用数组来选择多个值，这可能是您感兴趣的，因为您使用的是多选。

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

如何通过jquery选择一个选项

3 个答案: