Question

I have a below scenario. Actually, by the process the after rendering the html dropdown box is display the value like below

 <select id="ht" class="input-box quick-jump-menu" name="ht">
<option selected="selected" value="">Jump straight to a below option</option>

<option value="<span id="_SE_CP" _SE_CPt="default"><a href="Google.co.uk"  alt="Lakeside" target="_self" class="">Lakeside</a></span>">
       Lakeside
</option>

<option value="<span id="_SE_CP" _SE_CPt="default"><a href="http://www.google.com" alt="Alvaston Hall" target="_self" class=""></a></span>">
       Alvaston
</option>

by some process, it is using some span tag there, i need only url in the value attribute like below

 <select id="ht" class="input-box quick-jump-menu" name="ht">
<option selected="selected" value="">Jump straight to a below option</option>

<option value="Google.co.uk">
       Lakeside
</option>

<option value="http://www.google.com">
       Alvaston
</option>

Here, i need only set the URL value in the “Value” attribute of the “option” tag. i think this can be done through jquery.

Please suggest any one if possible and help will be much appreciated

Answer 1

​var tempDiv=$('<div/>');
$('#ht option').each(function(){
    tempDiv.html($(this).val());
    $(this).val(​​​​​​​​​​​​​​​​​​​​​​​​​​​tempDiv.find('a').attr('href'));
});

The above code uses a temporary div (tempDiv) to capture the html from the option value and extract the href value.

Demo (select an option): http://jsfiddle.net/A7nyd/

[Update] this is actually the same answer as @chrisgonzalez.