js select option对象小结-白红宇

js select option对象小结

阅读量：629 次

发布时间：2019-03-14

本文共 2938 字，大约阅读时间需要 9 分钟。

JQuery和原生JavaScript处理选择框的全面指南

舞动网页开发，选择框是用户输入数据的重要工具之一。无论是单选、多选，还是复选，它都为用户提供了一种直观的交互方式。而通过JQuery或原生JavaScript，可以对选择框进行操作，如获取值、设置值、增删选项等，极大地方便了开发工作。本文将详细介绍JQuery和原生方法的使用方法，并展示实际案例来理解它们的应用场景和优势。

JQuery处理选择框

JQuery在处理选择框方面提供了丰富的方法和简洁的语法，极大简化了开发流程。以下是JQuery操作选择框的关键方法：

获取选择的Text和Value

使用change事件触发选项变更时的动作。

$('#select_id').change(function() {    var selectedText = $('#select_id option:selected').text();    var selectedValue = $('#select_id').val();    var selectedIndex = $('#select_id')[0].selectedIndex;});

这段代码中，selectedText获取选中的文本，selectedValue获取选中的值，selectedIndex获取当前选定的索引值。

设置选择的Text和Value

设置索引值为1的选项选中：

$('#select_id')[0].selectedIndex = 1;

设置选中的值为4：

$('#select_id').val(4);

设置选项文本为“jQuery”并选中：

$('#select_id option:text("jQuery)').attr('selected', true);

增删选项

添加选项：

$('#select_id').append('');

插入选项于开头：

$('#select_id').prepend('');

删除选项：

$('#select_id option:last').remove();

根据索引或属性值删除选项：

$('#select_id option[index="0"]').remove();

删除值和文本匹配的选项：

$('#select_id option[value="3"]').remove();

动态操作选项

例如，根据用户选择动态添加或移除选项：

function changeShipMethod(shipping) {    if (shipping.value != "CA") {        $('#ISHIPTYPE option').each(function() {            if ($(this).val() == "111") {                $(this).remove();            }        });        $("").appendTo('#ISHIPTYPE');    } else {        $("").appendTo('#ISHIPTYPE');    }}

原生JavaScript处理选择框

尽管原生方法不如JQuery简洁，但在某些特定场景下（如需要高性能或不支持JQuery的环境）依然有其必要。以下是原生方法的关键点：

获取选项信息

var selectId = document.getElementById('selectId');var selectedText = selectId.options[selectId.selectedIndex].text;var selectedValue = selectId.value;var selectedIndex = selectId.selectedIndex;

创建和删除选项

创建选项并添加到Select中：

var option = new Option('我的吃吃', '4');selectId.options.add(option);

删除选项（通过索引或选中项）：

selectId.options.remove(selectId.selectedIndex);

删除所有选项：

selectId.options.length = 0;

动态操作选项

例如，根据用户选择动态添加或移除选项：

function number() {    var obj = document.getElementById('mySelect');    obj.options[obj.selectedIndex] = new Option('我的吃吃', '4');    obj.options[obj.selectedIndex].text = '我的吃吃';    obj.remove(obj.selectedIndex);}

实际案例：JQueryAJAX实现联动下拉列表

以下是一个使用JQueryAJAX与JSON实现的联动下拉列表的简要代码示例，展示了JQuery的灵活性和实用性：

function linkAgeJson(selectId, method, temp, url) {    $.ajax({        type: "GET",        dataType: "json",        url: url,        data: "method=" + method + "&temp=" + temp,        success: function(msg) {            var data = msg.lists;            coverJsonToHtml(selectId, data);        }    });}function coverJsonToHtml(selectId, nodeArray) {    var tempSelect = $('#' + selectId);    isClearSelect(selectId, '0');    for (var i = 0; i < nodeArray.length; i++) {        var tempOption = $j('