CODEWITHSUNDEEP
javascripthtmlxml
Carl Onager
Carl Onager

Reputation: 4122

Extract xml elements inside html select option element

I have a terrible legacy HTML document that contains some mixed XML used to create a form of metadata and some complicated JavaScript to manipulate the metadata that all needs to be upgraded to IE9. At the moment I'm having trouble with a select control that contains some additional XML nodes inside the option elements:

<select id="NoOfApplicants_Q" onchange="validate_js(this);doNoOfApplicantsChange();">
    <option value="" selected="true">Please select
        <tla:instruction type="jscript" value="$jointApplication = false;"></tla:instruction>
        <tla:instruction type="hide" value="App2Identity"></tla:instruction>
        <tla:instruction type="hide" value="App2Applicant"></tla:instruction>
    </option>
    <option value="1">One
        <tla:instruction type="jscript" value="$jointApplication = false;"></tla:instruction>
        <tla:instruction type="hide" value="App2Identity"></tla:instruction>
        <tla:instruction type="hide" value="App2Applicant"></tla:instruction>
    </option>
    <option value="2">Two
        <tla:instruction type="jscript" value="$jointApplication = true;"></tla:instruction>
    </option>
</select>

I need to read the tla:instruction nodes using JavaScript so that I can do some subsequent processing on them. However the line of code that I currently have doesn't return any nodes:

instructions = control.options[control.selectedIndex].getElementsByTagName('tla:instruction');

If I examine the DOM via the Watch window then the only elements below control.options[control.selectedIndex] are the text elements from within the options. e.g. 'Please Select', 'One', etc.

How can I get an array/list/collection of the tla:instruction elements from within the selected option?

Update: Would it be possible to extract these by opening the file as an XML document and then extracting them from there?

Additional Background: The simplified fragment above is part of a much larger document that is used as an electronic form in my companies old VB6 product. It's mixed XML and HTML without a schema and has only ever been shown through the VB6 Web Browser control. Because the web browser control copes very well with badly formed markup and pretty much ignores JavaScript errors all the problems inherent in the design have been allowed to fester for ten years.

p.s. Note that I can't use jquery as the legacy documents are controlled by a third party.

p.p.s See similar problem with input control here

Upvotes: 2

Views: 2626

Answers (1)

Turnerj
Turnerj

Reputation: 4288

I don't have VB6 Web Browser control to test with the exact same circumstances as you however playing around a little on JSFiddle with Firebug gave me a few ideas (obviously though, it wont work in normal browsers). Depending how your testing/debugging environment is set up, try counting the children of the option element first to see if Javascript can remotely see it.

So try control.options[control.selectedIndex].children.count first and if that returns 1 or more, try looping through the children collection. Perhaps even look at the childNodes property of the option element to see what that returns.

If these do not return what you want, I don't think there is a way to do that without changing the XML into HTML.

HTML

<select id="NoOfApplicants_Q" onchange="getChangedValue(this)">
<option value="" selected="true">Please select
    <tla:instruction type="jscript" value="$jointApplication = false;"></tla:instruction>
    <tla:instruction type="hide" value="App2Identity"></tla:instruction>
    <tla:instruction type="hide" value="App2Applicant"></tla:instruction>
</option>
<option value="1">One
    <tla:instruction type="jscript" value="$jointApplication = false;"></tla:instruction>
    <tla:instruction type="hide" value="App2Identity"></tla:instruction>
    <tla:instruction type="hide" value="App2Applicant"></tla:instruction>
</option>
<option value="2">Two
    <tla:instruction type="jscript" value="$jointApplication = true;"></tla:instruction>
</option>

JS

window.getChangedValue = function(SelectElement)
{
    var option = SelectElement.options[SelectElement.selectedIndex];
    alert("Count of Children Elements: "+option.children.length);
}

JSFiddle

Upvotes: 1

Related Questions