Question

这是我的代码完整代码：

<!doctype html>

<html>
<head>
    <meta charset="utf-8">
    <title>Date Picker</title>
</head>
<body>
<strong>Departing:</strong><br/>
<select name='dateSingleMonthDeparting' onChange='changeDate(this.options[selectedIndex].value);'>
    <option value='na'>Month</option>
    <option value='1'>January</option>
    <option value='2'>February</option>
    <option value='3'>March</option>
    <option value='4'>April</option>
    <option value='5'>May</option>
    <option value='6'>June</option>
    <option value='7'>July</option>
    <option value='8'>August</option>
    <option value='9'>September</option>
    <option value='10'>October</option>
    <option value='11'>November</option>
    <option value='12'>December</option>
</select>
<select name='dateSingleDayDeparting' id='day'>
    <option value='na'>Day</option>
</select>
<select name='dateSingleYearDeparting' id='year'>
    <option value='na'>Year</option>
</select><br/>



<strong>Returning:</strong><br/>
<select name='dateSingleMonthReturning' onChange='changeDate(this.options[selectedIndex].value);'>
    <option value='na'>Month</option>
    <option value='1'>January</option>
    <option value='2'>February</option>
    <option value='3'>March</option>
    <option value='4'>April</option>
    <option value='5'>May</option>
    <option value='6'>June</option>
    <option value='7'>July</option>
    <option value='8'>August</option>
    <option value='9'>September</option>
    <option value='10'>October</option>
    <option value='11'>November</option>
    <option value='12'>December</option>
</select>
<select name='dateSingleDayReturning' id='day'>
    <option value='na'>Day</option>
</select>
<select name='dateSingleYearReturning' id='year'>
    <option value='na'>Year</option>
</select>



<script>
function changeDate(i){
    var e = document.getElementById('day');
    while(e.length>0){
        e.remove(e.length-1);
        var j=-1;
        if(i=="na"){
            k=0;
        }else if(i==2){
            k=28;
        }else if(i==4||i==6||i==9||i==11){
            k=30;
        }else{
            k=31;
        }
    }
    while(j++<k){
        var s=document.createElement('option');
        var e=document.getElementById('day');
        if(j==0){
            s.text="Day";
            s.value="na";
            try{
                e.add(s,null);
            }catch(ex){
                e.add(s);
            }
        }
        else{
            s.text=j;
            s.value=j;
            try{
                e.add(s,null);
            }catch(ex){
                e.add(s);
            }
        }
    }
}
var currentTime = new Date();
y = currentTime.getFullYear()+1;
while (y-->1909){
    var s = document.createElement('option');
    var e = document.getElementById('year');
    s.text=y;
    s.value=y;
    try{
        e.add(s,null);
    }catch(ex){
        e.add(s);
    }
}
</script>
</body>
</html>

我有两个日期选择器。当我更改第一个时，它可以完美地工作，但是如果我改变第二个，那么函数将在第一个datepciker中起作用

我希望他们为每个日期选择器拥有自己的功能。我该怎么做才能实现这一目标？我已经尝试过这样的东西getElementById('day day2')，但它不起作用。

Answer 1

您的select已在标记中分配了两次ID day和year。那是错的。 ID应该是唯一的。

请将这些ID更改为day1，year1，day2和year2。然后将这些ID作为参数传递给函数，如changeDate(this.value, "day1", "year1")和此changeDate(this.value, "day2", "year2")。

现在将changeDate定义为

function changeDate(i, day, year) {
    var e = document.getElementById( day ); // please note that day is the variable passed

    ...................
}

作为不相关的旁注，this.options[selectedIndex].value与this.value

相同

Javascript两个datepicker冲突

1 个答案: