new Option()——實現時間聯動

本文轉載自查看原文 2013-06-09 16:05 14246 javascript

1、基礎准備：

　　先來了解下，如何運用js實現select動態添加option。

//1.動態創建select
function createSelect(){
    var mySelect = document.createElement("select");
    mySelect.id = "mySelect"; 
    document.body.appendChild(mySelect);
}

//2.添加選項option
function addOption(){
    //根據id查找對象，
    var obj=document.getElementById('mySelect');
    //添加一個選項
    obj.add(new Option("文本","值"));    //方法一：
    obj.options.add(new Option("text","value")); //方法二：
    for(var i=0;i<10;i++){
        obj.options[i]=new Option("新文本","新值");    //方法三：
    }
}

//3.刪除所有選項option
function removeAll(){
    var obj=document.getElementById('mySelect');
    obj.options.length=0;
}

//4.刪除一個選項option
function removeOne(){
    var obj=document.getElementById('mySelect');
    var index=obj.selectedIndex;    //index,要刪除選項的序號
    obj.options.remove(index);
}

//5.獲得選項option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;     //序號，取當前選中選項的序號
var val = obj.options[index].value;

//6.獲得選項option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;    
var val = obj.options[index].text;

//7.修改選項option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;    
var val = obj.options[index]=new Option("新文本","新值");

//8.刪除select
function removeSelect(){
    var mySelect = document.getElementById("mySelect");
    mySelect.parentNode.removeChild(mySelect);
}

2、時間聯動實戰

　　demo:

　　時間聯動的要點就是天數隨月份變化，考慮閏年，口訣：四年一潤，百年不潤，四百年再潤。下面直接看代碼吧。

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<meta name="author" content="@my_coder">
<title>時間聯動</title>
</head>

<body>
    <select id="year">
        <option>請選擇年份</option>
    </select>
    <select id="month">
        <option>請選擇月份</option>
    </select>
    <select id="day">
        <option>請選擇日</option>
    </select>
</body>
</html>

<script type="text/javascript">    

    var y=document.getElementById("year"),
        m=document.getElementById("month"),
        d=document.getElementById("day");

    //年
    var year=new Date().getFullYear();    
    for(var i=year;i>=1990;i--){
        y.options[year+1-i]=new Option(i,i);    //第一個參數是option的文本值，第二個參數是option的value值
    }

    //月
    for(var i=1;i<=12;i++){
        m.options[i]=new Option(i,i);
    }

    //日
    var day = function(){        
        d.length=1;        //初始化
        var y_value=y.value,
            m_value=m.value;
        if(y_value==""||m_value==""){
            return;    
        }
        else{
            var arr=[31,28,31,30,31,30,31,31,30,31,30,31];
            if((y_value%4==0&&y_value%100!=0)||y_value%400==0){
                arr[1]++;    
            }
            for(i=1;i<=arr[m_value-1];i++){
                d.options[i]=new Option(i,i);    
            }
        }
    }

    y.onchange = function(){
        day();
    }
    m.onchange = function(){
        day();
    }

</script>

參考：http://hi.baidu.com/sosw_syf/item/c13217c1ddca7b55bdef69ff

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js 實現時間相減 vue實現時間格式轉換 postgres如何實現時間字段更新通過隱藏option實現select的聯動效果 python實現時間o(1)的最小棧 java如何優雅的實現時間控制 js實現時間大小比較 TensorFlow實現時間序列預測用CSS實現時間軸總結 css實現時間軸