选择框ID值不在javascript，html中恢复答案

【问题标题】：Select box ID value not retreving in javascript ,html选择框ID值不在javascript，html中恢复
【发布时间】：2014-06-30 06:56:29
【问题描述】：

我在选择框中有 2 个值，我想根据我在单击提交按钮时选择的值来获取它们的 id。我在对话框中显示了这个选择框和保存按钮。当我尝试选择值并保存时，我得到的是 [object HTMLCollection] 而不是它们的 id。所以如果我选择 Fahrzeuge 我应该得到 id 1，如果我选择 News i应该得到 id 2。我在 javascript 的某个地方犯了一个小错误。这是我的 jsfiddle：demo。这是我的代码： html代码

<input type="button" id="butt-rahmen" value="Add Widget" />

<br /><br/>       

<div id="output"></div>

<div id="overlay" class="web_dialog_overlay"></div>

<div id="dialog" class="web_dialog">
   <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
      <tr>
         <td class="web_dialog_title">Widget</td>
      </tr>

      <tr>
         <td colspan="2" style="padding-left: 15px;">
            <b>Add Widget</b>
         </td>
      </tr>
      <tr>
         <td colspan="2" style="padding-left: 15px;">
             <div id="widgets">
               <select name="widgets" id="widgets" >
                         <option value="1">Fahrzeuge</option> 
                         <option value="2">News</option>
                </select>
             </div>

         </td>
      </tr>
      <tr>
         <td colspan="2" style="text-align: center;">
            <input id="btnSubmit" type="button" value="Save" />
         </td>
      </tr>
   </table>
</div>

js代码：

   $("#butt-rahmen").click(function (e)
      {
         ShowDialog(false);
         e.preventDefault();
      });     

      $("#btnSubmit").click(function (e)
      {
         var brand = $('#widgets select[name="widgets"]').val();
         $("#output").html("<b>Widget: </b>" + widgets);
         HideDialog();
         e.preventDefault();
      });



   function ShowDialog(modal)
   {
      $("#overlay").show();
      $("#dialog").fadeIn(300);     
   }

   function HideDialog()
   {
      $("#overlay").hide();
      $("#dialog").fadeOut(300);
   }

【问题讨论】：

标签： javascript html drop-down-menu submit-button jquery-selectbox

【解决方案1】：

是的，这是 JavaScript 中的小错误，请更改以下行

$("#output").html("<b>Widget: </b>" + widgets);

到

$("#output").html("<b>Widget: </b>" + brand);

【讨论】：

【解决方案2】：

尝试改变：

$("#output").html("<b>Widget: </b>" + widgets);

到

$("#output").html("<b>Widget: </b>" + brand);

widgets 没有在任何地方定义。

【讨论】：

是的，后来我意识到了这一点。 :-)