2

JQUERYはありません！ページを更新して、ドロップダウンの値を空白にリセットできるようにしたい (最初のオプション)。しかし、ページに移動して何かを入力してページを更新すると、以前にドロップダウンにあったオプションのテキストが保持されます。誰もこれを達成する方法を知っていますか??

これが私が使用しているドロップダウンです。すべてのコードを見たい場合は、投稿できます。

<select style="float:left;" id="leave" onchange="changeMessage(this);">
      <option value="0"></option>
      <option value="5">Get Married</option>
      <option value="100">Have a Baby</option>
      <option value="90">Adopt a Child</option>
      <option value="35">Retire</option>
      <option value="15">Military Leave</option>
      <option value="25">Medical Leave</option>
</select>

これがすべてのコードです...

<html>
<head>
<title>Life Event Picker Calendar</title>
<script>
function changeMessage(oElement) {
    var rd1 = document.getElementById("rd1");
    var rd1Text = rd1.parentNode.getElementsByTagName('span')[0];
    var rd2 = document.getElementById("rd2");
    var rd2Text = rd2.parentNode.getElementsByTagName('span')[0];

    document.getElementById("message1").innerHTML = "";
    document.getElementById("message2").innerHTML = "";
    document.getElementById("message3").innerHTML = "";
    document.getElementById("message4").innerHTML = "";
    document.getElementById("message5").innerHTML = "";

    rd1.checked = false;
    rd2.checked = false;
    //nothing
    if (oElement.value == "0") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Date";
    //have a baby
    } else if (oElement.value == "100") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.clear = "both";
        document.getElementById("radio").style.display = "inline-block";
        rd1Text.innerHTML = "C-Section";
        rd2Text.innerHTML = "Regular Birth";
        rd1.value = "C-Section";
        rd2.value = "Regular Birth";
        document.getElementById("day").innerHTML = "Anticipated Due Date";
    //military leave
    } else if (oElement.value == "15") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.clear = "both";
        document.getElementById("radio").style.display = "inline-block";
        rd1Text.innerHTML = "Training";
        rd2Text.innerHTML = "Active Duty";
        rd1.value = "Training";
        rd2.value = "Active Duty";
        document.getElementById("day").innerHTML = "Anticipated Leave Date";
    //get married
    } else if (oElement.value == "5") {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Marriage Date";
    //adopt a child
    } else if (oElement.value == "90") {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Anticipated Adoption Date";
    //retire
    } else if (oElement.value == "35") {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Anticipated Retirement Date";
    //medical leave
    } else if (oElement.value == "25") {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Anticipated Disability Date";       
    } else {}
    return;
}

function showChoice(input) {
    document.getElementById("btn").style.display = "inline-block";
}

//gets info picked and displays messages
function getInfo() {
    var myDate=new Date();
    var ev_num = parseInt(document.getElementById("leave").value)
    myDate.setFullYear(sel_year.value,sel_month.value,sel_day.value);
    var event_value = document.getElementById("leave").value;

    //get married
    if (event_value == 5) {
        var first_number = new Date(myDate);
        first_number.setDate(myDate.getDate() + 31);
        document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>" + "You are eligible to update coverage and personal information through your 'Get Married' Life Event.";
        document.getElementById("message2").innerHTML = "";
        document.getElementById("message3").innerHTML = "";
        document.getElementById("message4").innerHTML = "";
        document.getElementById("message5").innerHTML = "";

    //have a baby
    } else if (event_value == 100) {
        var first_number = new Date(myDate);
        first_number.setDate(myDate.getDate() + 31);
        var second_number = new Date(myDate);
        second_number.setDate(myDate.getDate() - 30);
        var third_number = new Date(myDate);
        third_number.setDate(myDate.getDate() + 7);

        document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>" + "You are eligible to update coverage and personal information through your 'Have a Baby' Life Event.";
        document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>" + "1) Call 1-877-968-7762 to initiate your leave. <br/>" + "2) Complete Authorization Release Form.";
        document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>Contact a Leave Specialist at the HR Service Center to request paid days if not enough Occasional Absence days.";

        var fourth_number;
        var fifth_number1;
        var fifth_number2;
        //C Section 
        if ((document.getElementById("rd1").checked) == true) {
            fourth_number = new Date(myDate);
            fourth_number.setDate(myDate.getDate() + 56);
            fifth_number1 = new Date(myDate);
            fifth_number1.setDate(myDate.getDate() + 57);
            fifth_number2 = new Date(myDate);
            fifth_number2.setDate(myDate.getDate() + 91);

            document.getElementById("message4").innerHTML = myDate + " up to " + fourth_number + "<br/>1) Benefits deducted from STD pay.<br/>2) Checkpoint to determine return to work date.";
            document.getElementById("message5").innerHTML = fifth_number1 + " up to " + fifth_number2 + "<br/>1) Paid time off is up to five paid days.<br/>2) FML job protection is up to 13 weeks.<br/>3) Benefit bill sent once STD ends.";

        //Regular Birth
        } else {
            fourth_number = new Date(myDate);
            fourth_number.setDate(myDate.getDate() + 42);
            fifth_number1 = new Date(myDate);
            fifth_number1.setDate(myDate.getDate() + 43);
            fifth_number2 = new Date(myDate);
            fifth_number2.setDate(myDate.getDate() + 91);

            document.getElementById("message4").innerHTML = "From " + myDate + " through " + fourth_number + "<br/>1) Benefits deducted from STD pay.<br/>Checkpoint to determine return to work date.";
            document.getElementById("message5").innerHTML = fifth_number1 + " up to " + fifth_number2 + "<br/>1) Paid time off is up to five paid days.<br/>2) FML job protection is up to 13 weeks.<br/>3) Benefit bill sent once STD ends.";
        }

    //adopt a child 
    } else if (event_value == 90) {
        var first_number = new Date(myDate);
        first_number.setDate(myDate.getDate() + 31);
        var second_number = new Date(myDate);
        second_number.setDate(myDate.getDate() - 30);
        var third_number = new Date(myDate);
        third_number.setDate(myDate.getDate() + 91);

        document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>" + "You are eligible to update coverage and personal information through your 'Have a Child' Life Event.";
        document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>" + "Call 1-877-968-7762 to initiate your leave.";
        document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>1) Adoption time off is up to 10 paid days.<br/>2) FML job protection up to 13 weeks.";
        document.getElementById("message4").innerHTML = "";
        document.getElementById("message5").innerHTML = "";

    //retire
    } else if (event_value == 35) {
        var second_number = new Date(myDate);
        second_number.setDate(myDate.getDate() - 90);
        var third_number = new Date(myDate);
        third_number.setDate(myDate.getDate() + 30);
        var fourth_number = new Date(myDate);
        fourth_number.setDate(myDate.getDate() + 60);

        document.getElementById("message1").innerHTML = "";
        document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>Call 1-877-968-7762 to initiate your retirement.<br/>2) Make Pension election/return form.<br/>3) Review Savings/401(k) Options.<br/>4) View Medical Options.<br/>5) Review/Confirm beneficiaries.";
        document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>Enroll in Medical Plan Options if applicable.";
        document.getElementById("message4").innerHTML = "From " + myDate + " through " + fourth_number + "<br/>1) Enroll in COBRA<br/>2) Payoff any 401(k) loans.";
        document.getElementById("message5").innerHTML = "";

    //military leave
    } else if (event_value == 15) {
        var second_number = new Date(myDate);
        second_number.setDate(myDate.getDate() - 30);
        var third_number
        var fourth_number;

        document.getElementById("message1").innerHTML = "";
        document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>Call 1-877-968-7762 to initiate your leave.";
        document.getElementById("message5").innerHTML = "";

        //Training Leave
        if ((document.getElementById("rd1").checked) == true) {
            third_number = new Date(myDate);
            third_number.setDate(myDate.getDate() + 14);
            fourth_number = new Date(myDate);
            fourth_number.setDate(myDate.getDate() + 15);

            document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>You are eligible to receive 100% pay.";
            document.getElementById("message4").innerHTML = "After " + fourth_number + "<br/>Your leave will be unpaid.";

        //Active Duty
        } else {
            third_number = new Date(myDate);
            third_number.setDate(myDate.getDate() + 365);

            document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>You are eligible to receive 50% pay.";
            document.getElementById("message4").innerHTML = "After " + third_number + "<br/>Your leave will be unpaid.";
        }

    //medical leave
    } else if (event_value == 25) {
        var first_number = new Date(myDate);
        first_number.setDate(myDate.getDate() + 31);
        var second_number = new Date(myDate);
        second_number.setDate(myDate.getDate() - 30);
        var third_number = new Date(myDate);
        third_number.setDate(myDate.getDate() + 7);
        var fourth_number = new Date(myDate);
        fourth_number.setDate(myDate.getDate() + 91);

        document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>You are eligible to update coverage and personal information through your 'Take Medical Leave' Life Event.";
        document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>1) Call 1-877-968-7762 to initiate your leave. <br/>2) Complete Authorization Release Form.";
        document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>Contact a Leave Specialist at the HR Service Center to request paid days if not enough Occasional Absence days.";
        document.getElementById("message4").innerHTML = "From " + myDate + " through " + fourth_number + "<br/>1) Benefits deducted from STD pay.<br/>2) Checkpoint to determine return to work date.";
        document.getElementById("message5").innerHTML = "After " + fourth_number + "<br/>Contact will be made to initiate the LTD application process prior to 92nd day.";



    } else {}
}
</script>
</head>
<body>

Life Event Picker Calendar<br>
<hr align="left" width="200px"/>
<div id="life" style="float:left;">Life Event</div><div id="day" style="display:float:left; margin-left:120px;">Date</div>

    <select style="float:left;" id="leave" onchange="changeMessage(this);">
          <option selected="selected"value="0"></option>
          <option value="5">Get Married</option>
          <option value="100">Have a Baby</option>
          <option value="90">Adopt a Child</option>
          <option value="35">Retire</option>
          <option value="15">Military Leave</option>
          <option value="25">Medical Leave</option>
    </select>    

<div id="calendar-container" style="float:left;" ></div>

    <button id="btn" style="display:none;" onclick="getInfo()"type="button">Process</button>

<br>
<div id="radio" style="display:none">
    <label><span></span><input type="radio" name="radio" id="rd1" value="" onclick="showChoice(this)"/></label>
    <label><span></span><input type="radio" name="radio" id="rd2" value="" onclick="showChoice(this)"/></label>
</div>

<br>
<div id="date"></div>
<div id="event"></div>
<div id="return"></div>
<div id="yourdate"></div>

<div id="message1"></div><br>
<div id="message2"></div><br>
<div id="message3"></div><br>
<div id="message4"></div><br>
<div id="message5"></div>

<script type="text/javascript">
//creates the element variables for the drop downs
//need to be up here for getInfo() to work
var sel_year = document.createElement('select'),
    sel_month = document.createElement('select'),
    sel_day = document.createElement('select');


//function that creates id calendar-container
(function() {
    //variables and values for years
    var yr1 = 2011,
        yr2 = 2012,
        yr3 = 2013,
        yr4 = 2014;
    var years = [yr1, yr2, yr3, yr4];
    //array with months and associated days
    var calendar = [
        ["January", 31], ["February", 28], ["March", 31], ["April", 30], ["May", 31], ["June", 30], ["July", 31], ["August", 31], ["September", 30],
        ["October", 31], ["November", 30], ["December", 31]],
        //this is the variable that accesses the content
        cont = document.getElementById('calendar-container');

    //creates year/month/day options and sets their values (month value is -1 for date calculation)
    function createOption(txt, val) {
        var option = document.createElement('option');
        option.value = val;
        option.appendChild(document.createTextNode(txt));
        return option;
    }

    //this clears any elements for days, months, years
    function clearChildren(ele) {
        while (ele.hasChildNodes()) {
            ele.removeChild(ele.lastChild);
        }
    }

    //this function is triggered when you change the year or month
    function recalculateDays() {
        var year_index = sel_year.value;
        var month_index = sel_month.value,
            df = document.createDocumentFragment();
        if ((month_index == 1) && (year_index % 4 == 0)) {
            for (var i = 0, l = calendar[month_index][1]; i < l + 1; i++) {
                //the first variable is what number will be displayed in the day drop down
                df.appendChild(createOption(i + 1, i + 1));
            }
        } else {
            //l is the variable for the number of days in the month from the array above ex:28, 30, 31
            for (var i = 0, l = calendar[month_index][1]; i < l; i++) {
                //the first variable is what number will be displayed in the day drop down
                df.appendChild(createOption(i + 1, i + 1));
            }
        }
        clearChildren(sel_day);
        sel_day.appendChild(df);
    }

    //this creates the month values
    function generateMonths() {
        var df = document.createDocumentFragment();
        for (var i = 0; i < calendar.length; i++) {
            df.appendChild(createOption(calendar[i][0], i));
        }
        //clears past months
        clearChildren(sel_month);
        //appends new months onto variable df
        sel_month.appendChild(df);
    }

    //this creates the year values
    function generateYears() {
        var df = document.createDocumentFragment();
        for (var i = 0; i < years.length; i++) {
            df.appendChild(createOption(years[i], years[i]));
        }
        //clears past months
        clearChildren(sel_year);
        //appends new months onto variable df
        sel_year.appendChild(df);
    }

    //anytime the month/year selector is changed this calls the function to change the days
    sel_month.onchange = recalculateDays;
    sel_year.onchange = recalculateDays;

    //runs the months and days functions
    generateYears();
    generateMonths();
    recalculateDays();

    //this is what displays each of the individual drop downs after everything has been done to them
    cont.appendChild(sel_year);
    cont.appendChild(sel_month);
    cont.appendChild(sel_day);

}());

</script>

</body>
</html>
4

5 に答える 5

3

これを試して：

<body onLoad="document.getElementById('leave').options[0].selected = 'selected';">
于 2012-08-24T15:34:26.123 に答える
2

JavaScriptハックを使用しないソリューションは次のとおりです。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Example</title>
    </head>
        <body>
        <select autocomplete="off">
          <option value="0" selected="selected"></option>
          <option value="5">Get Married</option>
          <option value="100">Have a Baby</option>
          <option value="90">Adopt a Child</option>
          <option value="35">Retire</option>
          <option value="15">Military Leave</option>
          <option value="25">Medical Leave</option>
        </select>

        <br /><br />

        <button id="btn" onclick="javascript:location.reload(true)" type="button">Test page reloading</button>


        </body>
        </html>

編集

いくつかのテストを行い、リロード ボタンを追加して、ページが JavaScript またはコードからトリガーされたものでリロードされるかどうかをテストしました。これまでにテストしたすべてのブラウザーで動作します。(値はデフォルトに設定されています)。IE では、キャッシングを処理する独自の方法があるように思われるため、普通の F5 キーは他のブラウザーのようには機能しません (IE では一般的です)。 、ナビゲーション、フォーム送信など (Web ページでの基本的なユーザー アクション)

于 2012-08-24T15:20:41.493 に答える
1

理解できるかどうかわかりませんが、簡単に試してください：

<option value="0" SELECTED></option>
于 2012-08-24T15:17:37.267 に答える
0

要素をループしてリセットするだけです：

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function resetSelect(element){
    var reset = parseInt(element.dataset.reset, 10);
    element.selectedIndex = isNaN(reset) ? 0 : reset;
}
function resetSelects(){
    var els = document.getElementsByClassName('reset') || [];
    for (var i = els.length; i--;){
        if (els[i] && els[i].options)
            resetSelect(els[i]);
    }
}
window.onload = function(){
    resetSelects();
};
</script>
</head>
<body>

<select class='reset' data-reset='0' style="float:left;" id="leave" onchange="changeMessage(this);">
      <option value="0"></option>
      <option value="5">Get Married</option>
      <option value="100">Have a Baby</option>
      <option value="90">Adopt a Child</option>
      <option value="35">Retire</option>
      <option value="15">Military Leave</option>
      <option value="25">Medical Leave</option>
</select>   

</body>
</html>
于 2012-08-24T15:38:17.280 に答える