Javascript 在ViewData中使用selectlist填充dropdownlist

我正在尝试填充HTML。Dropdownlist带有一个selectlist，该列表由数据库调用中的字符串值、位置地址和位置描述字段填充。我正在将selectlist作为viewdata传递给我的视图。下拉列表填充得很好，但当我使用该值时，它为null或空，正如我在javascript函数中输入的警报所示。下面是关于this.locations.value为何为null的代码：

我的视图代码：

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

---

位置是一个select属性，没有value属性。要获取所选选项的值，您需要使用所选索引，找到正确的选项，并引用该选项的值。但是，如果使用jQuery，它将使用jQuery对象的val方法获取select的值。我建议使用jQuery，因为它将使代码更简单，并且MS将使用VisualStudio支持它

使用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>

    ...

---

位置是一个select属性，没有value属性。要获取所选选项的值，您需要使用所选索引，找到正确的选项，并引用该选项的值。但是，如果使用jQuery，它将使用jQuery对象的val方法获取select的值。我建议使用jQuery，因为它将使代码更简单，并且MS将使用VisualStudio支持它

使用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>

    ...

---

下面是正在运行的代码：

<script type="text/javascript">

    var map;
    var gdir;
    var geocoder = null;
    var addressMarker;

    function setDirections(fromAddress, toAddress, locale) {

        gdir.load("from: " + fromAddress + " to: " + toAddress,
        { "locale": locale });
    }

    $(document).ready(function() {
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map_canvas"));
            gdir = new GDirections(map, document.getElementById("drv_directions"));
            GEvent.addListener(gdir, "load", onGDirectionsLoad);
            GEvent.addListener(gdir, "error", handleErrors);

            setDirections("King of Prussia", "1302 Conshohocken Road, Conshohocken, PA 19428", "en_US");
        }
        $('form').submit(function() {
            var fromAddress = $(this).find('#from').val();
            var toAddress = $(this).find('#locations').val();
            var locale = 'en-US';
            alert(fromAddress);
            alert(toAddress);
            setDirections(fromAddress, toAddress, locale);
            return false;
        });

    });

</script>

---

下面是正在运行的代码：

<script type="text/javascript">

    var map;
    var gdir;
    var geocoder = null;
    var addressMarker;

    function setDirections(fromAddress, toAddress, locale) {

        gdir.load("from: " + fromAddress + " to: " + toAddress,
        { "locale": locale });
    }

    $(document).ready(function() {
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map_canvas"));
            gdir = new GDirections(map, document.getElementById("drv_directions"));
            GEvent.addListener(gdir, "load", onGDirectionsLoad);
            GEvent.addListener(gdir, "error", handleErrors);

            setDirections("King of Prussia", "1302 Conshohocken Road, Conshohocken, PA 19428", "en_US");
        }
        $('form').submit(function() {
            var fromAddress = $(this).find('#from').val();
            var toAddress = $(this).find('#locations').val();
            var locale = 'en-US';
            alert(fromAddress);
            alert(toAddress);
            setDirections(fromAddress, toAddress, locale);
            return false;
        });

    });

</script>

---

仍然不起作用。从我的表单标签中取出onsubmit。我已经在使用jquery了，但是在我的ready函数中添加了您的建议。警报生成的fromAddress为“未定义”，to为空。仍不工作。从我的表单标签中取出onsubmit。我已经在使用jquery了，但是在我的ready函数中添加了您的建议。警报为fromAddress生成“未定义”，为to地址生成“空白”。我知道这是很久以前的事了，但您可能想解释一下发生了什么变化，这样人们就不必盯着看和比较来找出答案。您的权利已经有一段时间了，但我相信区别在于我引用下拉列表的方式。From:this.location.value To:$this.find'From.val；我的意思是$this.find'location'.val；我知道这是很久以前的事了，但你可能想解释一下是什么改变了，这样人们就不必盯着看和比较来弄清楚。你的权利已经有一段时间了，但我相信区别在于我引用下拉列表的方式。From:this.location.value To:$this.find'From.val；我的意思是$this.find'location'.val；