javascript - 在 ViewData 中使用选择列表填充下拉列表

Question

我正在尝试填充 HTML。带有 selectlist 的下拉列表，其中填充了来自数据库调用的字符串值(位置地址)和文本(位置描述)字段。我将选择列表作为 View 数据传递给我的 View 。下拉列表填充得很好，但是当我使用该值时，它是 null 或空的，正如我放入 javascript 函数的警报所见。这是代码 任何想法为什么 this.locations.value 为空:

我的查看代码:

<script type="text/javascript">
    var map;
    var gdir;
    var geocoder = null;
    var addressMarker;

    function setDirections(fromAddress, toAddress, locale) {
        alert(toAddress);
        gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale });
    }
</script>

<div id="maincontent2">
    <form action="#" onsubmit="setDirections(this.from.value, this.locations.value, 'en_US'); return false">
        <table>
            <tr>
                <th align="left">From:&nbsp;</th>
                <td align="left" ><input type="text" id="fromAddress" name="from" size="35px" value="King of Prussia, PA"/></td>
                <th align="left">&nbsp;&nbsp;To:&nbsp;</th>
                <td align="left"> <%= Html.DropDownList("locations",(SelectList)ViewData["OfficeLocations"])%></td>
            </tr>
            <tr>
                <td></td>
                <td align="left">
                    <br />
                    <input name="submit" type="submit" value="Get Directions!" />
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td valign="top"><div id="drv_directions" style="width: 250px"></div></td>
                <td valign="top" style="padding-top:15px"><div id ="map_canvas"></div></td>
            </tr>
        </table>      
     </form>
</div>

我的 Controller 代码:

public ActionResult Directions()
{
    uls_dbDataContext ulsdb_dc = new uls_dbDataContext();
    ViewData["OfficeLocations"] = new SelectList(ulsdb_dc.GetOfficeLocations(),"location_address", "location_name");
    ViewData["Title"] = "Directions";

    return View();
}

Answer 1

Locations 是一个选择，没有值属性。要获取所选选项的值，您需要使用所选索引，找到正确的选项，并引用选项的值。但是，如果您使用 jQuery，则可以使用 jQuery 对象的 val() 方法获取 select 的值。我建议使用 jQuery，因为它会使代码更简单，并且 MS 将通过 Visual Studio 支持它。

使用 jQuery 的例子:

<script type='text/javascript'>
    $(document).ready( function() {
       $('form').submit( function() {
          var fromAddress = $(this).find('#from').val();
          var toAddress = $(this).find('#locations').val();
          var locale = 'en-US';

          ....
          return false;
       });
    });
</script>

  <form action="#">

    <table>
    <tr><th align="left">From: </th>

    <td align="left" ><input type="text" id="fromAddress" name="from" size="35px"
    value="King of Prussia, PA"/></td>
    <th align="left">  To: </th>
    <td align="left"> <%= Html.DropDownList("locations",(SelectList)ViewData["OfficeLocations"])%></td>

    ...