0

質問で述べているように、ドロップダウンメニューから要素を取得し、それを格納されている変数に関連付けてから、ifステートメントを使用して変数をWebページの別の場所に配置しようとしています。以下の例には月のドロップダウンがあり、「getElementByID」を使用して日数を投稿したいと思います。これを機能させるための良い方法は何ですか？ARRGH私はまったくの初心者です...どんな助けもいただければ幸いです。これが私のhtml/javascriptですがCSSを良くも悪くも除外しています-

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
   <script language="javascript">
        function displayDaysInTheMonth()
        {
            var  thirty = document.monthForm.30
            var thirtyone = document.monthForm.31
            var twentyeight = document.monthForm.28
            if (thirty == 'true' )
            {
                document.monthForm.getElementById('a').innerHTML = "has 30 days";
                return;
            }
            else if (thirtyone == 'true' )
            {
                document.monthForm.getElementById('b').innerHTML = "has 31 days";
                return;
            }
            else if (twentyeight == 'true' )
            {
                document.monthForm.getElementById('c').innerHTML = "has 28 days";
                return;
            }

        }
  </script>  
</head>
<body>
<div class='container'>
        <h2> David Platt's</h2>
        <h2>Monthly Day Count</h2>
        <form name='monthForm'>
            <select name='months' onchange='displayDaysInTheMonth();' style='float: left; margin: 0 10px 10px 15px;'>
                <option name = '31'>January</option>
                <option name = '28'>February</option>
                <option name = '31'>March</option>
                <option name = '30'>April</option>
                <option name = '31'>May</option>
                <option name = '30'>June</option>
                <option name = '31'>July</option>
                <option name = '31'>August</option>
                <option name = '30'>September</option>
                <option name = '31'>October</option>
                <option name = '30' >November</option>
                <option name = '31'>December </option>
            </select>
            <div name='result' class='result' id = 'a' id = 'b' id = 'c' >has # days.</div>
            <div class='clear'></div>
        </form>
    </div>  
</body>
</html>
4

2 に答える 2

0

これを行うには、jqueryAPIを使用できます。

ドロップダウン値を取得し、Div値を選択した値に設定するには、これを行います

function displayDaysInTheMonth()
{
       var days = $('#months option:selected').val(); //gets dropdown value
       $("#a").html("has " + days + " days"); //sets div value here
}

divをに変更します

<div name='result' class='result' id = 'a'>has # days.</div>

ドロップダウンをに変更

<select name='months' onchange='displayDaysInTheMonth();' 
  style='float: left; margin: 0 10px 10px 15px;'>
    <option value='31'>January</option>
    <option value='28'>February</option>
    <option value='31'>March</option>
    <option value='30'>April</option>
    <option value='31'>May</option>
    <option value='30'>June</option>
    <option value='31'>July</option>
    <option value='31'>August</option>
    <option value='30'>September</option>
    <option value='31'>October</option>
    <option value='30' >November</option>
    <option value='31'>December </option>
</select>
于 2013-01-24T22:28:36.650 に答える
0

実際、私はjavascriptのみを使用してこれを行う方法を見つけました。これは、カレンダーの日付以外の他の数値セットに関連付けることができます。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
   <script language="javascript">
        function displayDaysInTheMonth()
        {
        var numberOfDays = document.monthForm.months.value;
    var element = document.getElementById('a')
    element.innerHTML= "has " + numberOfDays + " days";
        }
  </script>  
</head>
<body>
<div class='container'>
        <h2> David Platt's</h2>
        <h2>Monthly Day Count</h2>
        <form name='monthForm'>
            <select name='months' onchange='displayDaysInTheMonth();' style='float: left; margin: 0 10px 10px 15px;'>
                <option value = '31'>January</option>
                <option value = '28'>February</option>
                <option value = '31'>March</option>
                <option value= '30'>April</option>
                <option value = '31'>May</option>
                <option value = '30'>June</option>
                <option value = '31'>July</option>
                <option value = '31'>August</option>
                <option value = '30'>September</option>
                <option value = '31'>October</option>
                <option value = '30' >November</option>
                <option value = '31'>December </option>
            </select>
            <div name='result' class='result' id = 'a' id = 'b' id = 'c' >has # days.</div>
            <div class='clear'></div>
        </form>
    </div>  
</body>
</html>
于 2013-01-25T13:31:15.090 に答える