select & option (HTML, JavaScript, jQuery)

创建时间:
2012-07-01 11:03
最近更新:
2018-10-01 16:23

Resource

  1. jQuery 操作 select
  2. jQuery 获取 select 选择的 text 和 value
  3. jQuery 为 select 添加 option 的代码探讨
  4. jQuery 获得 select option 的值 和对 select option 的操作

选中 option

根据 value 选中 option

//2018-04-21 测试有效:
$('#IsSigned').val(null);
$('#IsSigned').val('true');
$('#IsSigned').val('false');

根据 innerHTML / text 选中 option

//2018-04-21 测试有效:
$('#IdOfSlt').find('option').TEqualInnerHtml('Full innerHTML').prop('selected', true);

选择空项

var emptyOpt = jRef.find('[value=""]').prop('outerHTML');

网摘 - jQuery 获取 select 选择的 text 和 value

// 为 Select 添加事件,当选择其中一项时触发
$("#select_id").change(function(){ ... });
// 获取 Select 选择的 Text
var checkText = $("#select_id").find("option:selected").text();
// 获取 Select 选择的 Value
var checkValue = $("#select_id").val();
// 获取 Select 选择的索引值
var checkIndex = $("#select_id ").get(0).selectedIndex;
// 获取 Select 最大的索引值
var maxIndex = $("#select_id option:last").attr("index");

网摘 - jQuery 设置 select 选择的 text 和 value

// 设置 Select 索引值为 1 的项选中
$("#select_id ").get(0).selectedIndex = 1;
// 设置 Select 的 Value 值为 4 的项选中
$("#select_id ").val(4);
// 设置 Select 的 Text 值为 jQuery 的项选中
$("#select_id option[text='jQuery']").attr("selected", true);
//2018-04-21 测试发现 因 option 无 text 属性 故上一行 [text='jQuery'] 选择器无效。有效方案详见本文另一小节。

网摘 - jQuery 添加/删除 select 的 option 项

// 为 Select 追加一个 Option (下拉项)
$("#select_id").append("<option value='Value'>Text</option>");
// 为 Select 插入一个 Option (第一个位置)
$("#select_id").prepend("<option value='0'>请选择</option>");
// 删除 Select 中索引值最大 Option (最后一个)
$("#select_id option:last").remove();
// 删除 Select 中索引值为 0 的 Option (第一个)
$("#select_id option[index='0']").remove();
// 删除 Select 中 Value='3' 的 Option
$("#select_id option[value='3']").remove();
// 删除 Select 中 Text='4' 的 Option
$("#select_id option[text='4']").remove();

测试记录 - 单选/多选 的 val()

测试时间

2016-08-05)

测试代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <select>
        <option value="11">one one</option>
        <option value="22">two two</option>
    </select>

    <select multiple>
        <option value="11">one one</option>
        <option value="22">two two</option>
    </select>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        var jSelect = $('select');
        var jSelectSingle = jSelect.eq(0);
        var jSelectMultiple = jSelect.eq(1);
    </script>
</body>
</html>

测试结果 (Firefox F12)

默认情况下 jSelectSingle.val() 总是返回第一个 option 的值。即使执行 jSelectSingle.val('') 也无法清除此默认值。
默认情况下 jSelectMultiple.val() 总是返回 null。无论选中一项或多项,返回值总是字符串数组,形如 ["11", "22"]

以下代码将值设为任何不存在的值,将取消全部 option[selected]。但非 [multiple] 总是会选中第一个 option、而 [multiple] 会取消全部:

jSelectSingle.val('');
jSelectSingle.val(1234);
jSelectSingle.val(asdf);
jSelectMultiple.val('')

以下代码均可选中 <option value="22">two two</option>:

jSelectSingle.val(22);
jSelectSingle.val('22');
jSelectMultiple.val(22)
jSelectMultiple.val('22')

以下代码均可实现多选:

jSelectMultiple.val([11,22])
jSelectMultiple.val([22,11])        //数组中项的次序无关。
jSelectMultiple.val(['22','11'])    //整型或字符串均可。
jSelectMultiple.val([33,22,11])     //数组中不存在的项会被忽略。

生产代码 - 向 select 中添加 option

2018-10-01 从 CodeGen\trunk\Site\Static\Js\TLibrary.js 删除了以下代码:

TSltAddOt: function(otText, otValue, idxBefore, isSelected){
    return this.each(function(){
        var ot = Ce("option");
        ot.text = otText;
        if(!T.Type.IsUndefined(otValue)){
            ot.value = otValue;
        }
        ot.selected = isSelected === true;
        idxBefore = (T.Type.IsIntegerNonNegative(idxBefore) === true && idxBefore < this.length) ? idxBefore : null;
        try{
            /*Standards compliant.*/
            /*Tony测试发现,下一行在TT4.8(1000)下将抛出异常,而在IE9.0.8112.16421/CM20.0.1132.57m/FF14.0.1下均正常执行。*/
            this.add(ot, (idxBefore === null ? null : this.options[idxBefore]));
        }
        catch(ex){
            /*IE only.*/
            /*Tony测试发现在TT4.8(1000)下将执行下一行,且具有有下述特征:第2个参数可为表示option.index的Number或String;第2个参数如大于等于select.length则追加在最后;第2个参数如是null或option对象则无反应;如没有第2个参数则追加在最后。*/
            this.add(ot, (idxBefore === null ? this.length : idxBefore));
        }
    });
},

因为:

  1. 上述代码 所依赖的 domSelect.add() 存在兼容性问题。
  2. 上述代码 只能添加 1 个 option,如需添加多个则需循环调用,多次修改 DOM,效率不佳。
  3. 上述代码 较下述代码复杂。

取而代之,在 CodeGen\trunk\Site\Views\PropCol\Create.cshtml 使用了以下代码:

$('#IdOfRef_Parent').change(function() {
    var val = this.value;
    if(!val) {
        return false;
    }
    $.getJSON('/PropCol/GetPropCols', { IdOfClsTb: val }, function(data) {
        var jRef = $('#Ref');
        var jOpts = [];
        var emptyOpt = jRef.find('[value=""]').prop('outerHTML');
        jOpts.push(emptyOpt);
        $.each(data, function(key, val) {
            jOpts.push('<option value="' + key + '">' + val + '</option>');
        });
        var html = jOpts.join('');
        jRef.html(html);
    });
});