JQuery trying to insert html of h3 into a DDL dynamically?

Question

Yet another bit i'm stuck on

$("div.evenprop .locname").each(function() { $("#ctl00_dd1 option").val(".locid").html($(this).clone()); });​

<select id="ctl00_dd1" name="ctl00$dd1">
<option value="HANW"></option>
<option value="HEYD"></option></select>

<div style="displaY: none;"> <div class="evenprop"><h3 class="locname">Hanworth</h3><span class="locid" style="display:none">HANW</span></div> <div class="evenprop"><h3 class="locname">Heydon</h3><span class="locid" style="display:none">HEYD</span></div> </div>​​​​​​​​​​

I have a drop down list with two items in it and the values "HANW" and "HEYD" I'm trying to grab the locname that refers to that locid of the DDL and insert it into the DDL value if that makes any sense?

DDL should look like this with end result

<select id="ctl00_dd1" name="ctl00$dd1"><option value="Hanworth"></option><option value="Heydon"></option></select>

Thanks

Jamie

Answer 1

Why are you doing this? Can it not be rendered on the server the way it needs to be? The whole process seems very round-about here, I suggest you re-architect the overall approach. That being said, if there is a valid reason for doing it, this will do the job:

$("div.evenprop .locid").each(function() { 
  $("#ctl00_dd1 option[value='" + $(this).text() + "']").text($(this).prev().text()); 
});​

You can give it a try here, here's a more efficient version that's a bit less terse:

var opts = $("#ctl00_dd1 option");
$("div.evenprop .locid").each(function() { 
  var locid = $(this).text();
  opts.filter(function() { return this.value == locid; }).text($(this).prev().text()); 
});​

You can give it a try here