javascript - 选择框 ID 值未在 javascript、html 中检索

Question

我在选择框中有 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);
   }  

Answer 1

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

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

到

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