• select设置选中项/select的级联


    一、selected="selected"

    HTML通过<select>的属性来设置选中项,

    此方法也可以在动态语言在后台根据需要控制输出结果。

    <select ID='sel' class="form-control width150">  
     <option value="1">开启</option>  
    <option selected="selected" value="0">关闭</option>   <!-- selected="selected" 默认选择 -->
    </select>

    二、js来设置选中项:修改selected属性值

    <script >
    var  ss = document.getElementById('sel');
    ss[0].selected = true;//选中
    </script>

    三、jquery设置选中项- 设置指定value为项中

      1.设置value为vxx的项选中

       $(".selector").val("vxx");
    
         如:   $("#sel").eq(0).val("0");    

    四、jquery设置选中项- 设置指定text为项中  

    1.设置text为txx的项选中

        $(".selector").find("option:contains('pxx')").attr("selected",true);

    1   $(".select").eq(0).find("option:contains('关闭')").attr("selected", true);
    2             var opt = $(".select").eq(0).find("option:contains('关闭')");
    3             console.log(opt);                         //obj {...}
    4             console.log(    opt.attr("selected"));  // selected

    第四行 显示结果——

     selected

      2.注意:

      $(".selector").find("option[text='pxx']").attr("selected",true); 不可行

    1   var opt = $(".select").eq(0).find("option[text='关闭']");
    2    console.log(opt);                                      //obj{...}
    3    console.log(    opt.attr("selected"));            // undefined

    第三行显示结果——

    undefined

    3、注意:获取当前选中项的value

        $(".selector").val();

    4、注意:获取当前选中项的text

        $(".selector").find("option:selected").text();

    五、select的级联

    即第二个select(obj2)的值随着第一个select(obj1)选中的值变化,第三个第四个等其他select(other)也跟着变化

    function GetChildrenData(dataobj, obj1, obj2,  other) {
        obj1.change(function () {
    
            var obj2Text = obj2.find("option").eq(0).text(); //请选择...
            obj2.empty();
            obj2.append('<option value="">' + obj2Text + '</option>');
         
    
            if(other !=null )
            for (var i = 0; i < other.length; i++) {
                var otherText = other[i].find("option").eq(0).text(); //请选择...
                other[i].empty();
                other[i].append('<option value="">' + otherText + '</option>');
            }
            if ($(this).val() != "") {
                dataobj.GetChildredData($(this).val(), function (re) {
                    try {
                        var ds = JSON.parse(re.value).Table;
                        for (var i = 0; i < ds.length; i++) {
                            obj2.append('<option value="' + ds[i].ID + '">' + ds[i].Name + '</option>');
                        }
                    } catch (e) { }
                })
            }
        })
    }
  • 相关阅读:
    HDU
    C# Stopwatch
    RMQ(Range Minimum Query)问题(转)
    HDU
    POJ
    HDU
    POJ
    POJ
    docker安装testlink
    廖雪峰Java2面向对象编程-3继承和多态-2多态
  • 原文地址:https://www.cnblogs.com/July-/p/9596271.html
Copyright © 2020-2023  润新知