如何從下拉菜單中將元素與存儲的變量相關聯並將該變量寫入網頁上的其他位置？

正如它在問題中所述，我試圖從下拉菜單中獲取一個元素，並將其與存儲的變量相關聯，然後使用if語句將該變量放入網頁上的其他位置。我在下面的例子中有幾個月的下拉菜單，我想使用'getElementByID'發佈天數。什麼是完成這項工作的好方法？ ARRGH我是一個全新的...任何幫助，將不勝感激。這裏是我的HTML/JavaScript的排除CSS更好或worse-如何從下拉菜單中將元素與存儲的變量相關聯並將該變量寫入網頁上的其他位置？

<!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>

來源

2013-01-24 Napalm6b

您可以使用jquery API做到這一點：

至獲取下拉值和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-24 22:28:36

其實我發現了一個辦法做到這一點只使用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-25 13:31:15 Napalm6b

如何從下拉菜單中將元素與存儲的變量相關聯並將該變量寫入網頁上的其他位置？

回答

相關問題