如何解析在Javascript / jQuery中作为HTML字符串返回的下拉列表？

Question

我得到一个像这样的HTML字符串。 我想得到选定的值，在这种情况下是AN ：

<SELECT id=ddl_Freq name=ddl_Freq><OPTION selected value=AN>Annually</OPTION> <OPTION value=BM>Bi-Monthly</OPTION> <OPTION value=MO>Monthly</OPTION> <OPTION value=OT>One Time</OPTION> <OPTION value=QT>Quarterly</OPTION> <OPTION value=WE>Weekly</OPTION></SELECT>

格式化时看起来像这样：

<SELECT id=ddl_Freq name=ddl_Freq>
    <OPTION selected value=AN>Annually</OPTION> 
    <OPTION value=BM>Bi-Monthly</OPTION> 
    <OPTION value=MO>Monthly</OPTION>
    <OPTION value=OT>One Time</OPTION> 
    <OPTION value=QT>Quarterly</OPTION> 
    <OPTION value=WE>Weekly</OPTION>
</SELECT>

我尝试了这两种方法，但我没有成功。

方法1：JavaScript

DdlHtml = document.createElement('select');
DdlHtml.innerHTML = RawDdlString;
item = DdlHtml.options[DdlHtml.selectedIndex].value;

这会失败，因为该字符串已包含<SELECT>和</SELECT>标记。

方法2：jQuery

DdlHtml2 = $.parseHTML(RawDdlString);
item = DdlHtml2.options[DdlHtml2.selectedIndex].value;

这也不起作用，因为DdlHtml2.options未定义。

如何在Javascript或jQuery中解析包含HTML下拉列表的HTML的字符串？

Answer 1

将字符串包装在jQuery选择器中：

$(function() {
    var $select = $("<SELECT id=ddl_Freq name=ddl_Freq><OPTION selected value=AN>Annually</OPTION> <OPTION value=BM>Bi-Monthly</OPTION> <OPTION value=MO>Monthly</OPTION> <OPTION value=OT>One Time</OPTION> <OPTION value=QT>Quarterly</OPTION> <OPTION value=WE>Weekly</OPTION></SELECT");
   console.log($select.val()); 
});

这是一个小例子

Answer 2

使用jQuery

$（ '＃ddl_Freq'）。VAL（）

Answer 3

没有jQuery，

<SELECT id=ddl_Freq name=ddl_Freq>
    <OPTION selected value=AN>Annually</OPTION> 
    <OPTION value=BM>Bi-Monthly</OPTION> 
    <OPTION value=MO>Monthly</OPTION>
    <OPTION value=OT>One Time</OPTION> 
    <OPTION value=QT>Quarterly</OPTION> 
    <OPTION value=WE>Weekly</OPTION>
</SELECT>

var x = document.getElementById("ddl_Freq");
x.options[x.selectedIndex].value;



Output:
    "AN"

链接到jsbin片段：

http://jsbin.com/omuxow/1/edit