Question

我正在尝试创建一个页面，在下拉框中显示不同的时间（取决于选择）。

我创建了一个带有下拉列表的页面，但我不知道从中获取所选值，并在文本框中显示正确的时间

这是我的模特：

 namespace WebApplication2.Models {
 public class Countries
 {
     public List<Country> CountriesList = new List<Country>();
     public int SelectionID { get; set; }
     public Countries()
     {
         Country CooseCountry = new Country { Name = "Choose country", ID = 1};
         Country Israel = new Country { Name = "Israel - Tel-Aviv", ID = 2};
         Country USA = new Country { Name = "USA - New -York", ID = 3};
         Country Germany = new Country { Name = "Germany - Berlin", ID = 4};
         CountriesList.Add(CooseCountry);
         CountriesList.Add(Israel);
         CountriesList.Add(USA);
         CountriesList.Add(Germany);
     }

 } }

控制器：

 public class TlvTimeController : Controller
 {
     public ActionResult Index()
     {
         ModelDateTime MyTime = new ModelDateTime();
         Countries CountriesList = new Countries();
         return View(CountriesList);                        
     }

 }

查看：

 @model WebApplication2.Models.Countries
 @{
     ViewBag.Title = "Index";
 }

 <h2>
     @Html.DropDownListFor(m => m.SelectionID,
                 new SelectList(Model.CountriesList,
                                    "ID", "Name"))

     @Html.Label("The time")
 </h2>
 <td> <input type="button" value="Show the time" id="ShowTime" /></td>

The page in the browser

Answer 1

您可以通过Jquery使用它，下面的代码可能对您有用：

<html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.techtricky.com/wp-content/jquery/jquery.jclock.js"></script>
  <script type="text/javascript">
    $(document).ready(
        function() {
           $("#zones").change(function(){
           if ($('#time-cont .time').length>0){ $('#time-cont .time').remove();}
       var offset = $(this).val();    
           if (offset == '') return;       

       $('#time-cont').append('<div class="time"></div>');

           var options = {
            format:'<span class=\"dt\">%A, %d %B %I:%M:%S %P</span>',
            timeNotation: '12h',
            am_pm: true,
            fontFamily: 'Verdana, Times New Roman',
            fontSize: '20px',
            foreground: 'black',
            background: 'yellow',
            utc:true,
            utc_offset: offset
          }

          $('#time-cont .time').jclock(options);
       });
     });
    </script>

   </head>
   <body>
   <select id="zones">
    <option value="">--Select--</option>
    <option value="10">Australia</option> // Australia UTC offset value is 10
    <option value="8">China</option>
    <option value="5.5">India</option>
    <option value="12">Newzealand</option>
    <option value="0">UK</option>
    <option value="-5">US EST</option>

  </select>
  <div id="time-cont"></div>
  </body>
</html>

获取选定值的html.dropdownlist

1 个答案: