Question

I have the following code that is automatically generated, I want jQuery code help me to take out the value inside the div and add into a dropdown menu, and add “/listing-agent-staff/barack-obama” as option value.

the auto generated code:

<div class="StaffName">Barack Obama</div>
<div class="StaffName">Bill Clinton</div>
<div class="StaffName">Will Smith</div>

the dropdown menu I want the value to be inserted to:

<label for="Listing_Agent_Staff">Listing Contact</label>
<select name="Listing_Agent_Staff" id="Listing_Agent_Staff" class="cat_dropdown">
<option value="">-- Please select --</option>
<option value="/listing-agent-staff/barack-obama">Barack Obama</option>
<option value="/listing-agent-staff/bill-clinton">Bill Clinton</option>
<option value="/listing-agent-staff/will-smith">Will Smith</option>
</select>

please note the first part is generated automatically so the number of record varies, the number of options in the second part should cope with that. Thank you.

Answer 1

Use the following:

​$(".StaffName")​​​​​​​​.each(function () {
   var name = $(this).text();
   var value = "/listing-agent-staff/" + name.toLowerCase().replace(" ", "-");
   $("<option>").text(name).attr("value", value).appendTo("#Listing_Agent_Staff");
}​);​

Here’s a DEMO.