How do I parse a dropdownlist returned as a HTML string in Javascript/jQuery?

Question

I get a HTML string like this. I want to get the selected value, which, in this case is 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>

which when formatted looks like this:

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

I tried these two approaches, but I wasn't successful.

Approach 1: JavaScript

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

This fails because the string already contains <SELECT> and </SELECT> tags.

Approach 2: jQuery

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

This also didn't work as DdlHtml2.options is undefined.

How do I parse this string which contains HTML for a dropdownlist in either Javascript or jQuery?

CodingIntrigue · Accepted Answer · 2013-07-30 15:04:23Z

3

Wrap the string in a jQuery selector:

$(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()); 
});

Here is an example fiddle

edited Jul 30, 2013 at 15:04

answered Jul 30, 2013 at 14:58

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vinit Prajapati · Accepted Answer · 2013-07-30 14:59:26Z

0

Using jQuery

$('#ddl_Freq').val()

answered Jul 30, 2013 at 14:59

Vinit Prajapati

1,6131 gold badge18 silver badges30 bronze badges

Comments

v2b · Accepted Answer · 2013-07-30 15:20:18Z

0

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

link to jsbin snippet:

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

edited Jul 30, 2013 at 15:20

answered Jul 30, 2013 at 15:12

v2b

1,4569 silver badges15 bronze badges

Collectives™ on Stack Overflow

How do I parse a dropdownlist returned as a HTML string in Javascript/jQuery?

Approach 1: JavaScript

Approach 2: jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Approach 1: JavaScript

Approach 2: jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related