jQuery take value and insert into dropdown menu and add url as option value

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.

João Silva · Accepted Answer · 2012-08-27 00:43:07Z

3

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.

answered Aug 27, 2012 at 0:43

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

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

Comments

Joseph Silber · Accepted Answer · 2012-08-27 00:43:20Z

2

var options = '';

$('.StaffName').each(function() {
    var val = $.text(this),
        url = val.toLowerCase().replace(/ /g, '-');
    options += '<option value="/listing-agent-staff/' + url + '">' + val + '</option>';
});

$('#Listing_Agent_Staff').append(options);

Here's the fiddle: http://jsfiddle.net/MCKZ7/

answered Aug 27, 2012 at 0:43

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Comments

Lix · Accepted Answer · 2012-08-27 00:43:17Z

1

All you have to do is iterate over all the StaffName elements and append the apropriate HTML to the select.

$.each('.StaffName',function(index,elem){
  var oldValue = $(elem).text().toLowerCase();
  var optionValue = '/listing-agent-staff/' + oldValue.replace(' ','-');
  $("#Listing_Agent_Staff").append('<option value="'+ optionValue +'">'+ $(elem).text() +'</option>';
});

What we are doing here is iterating over all the .StaffName elements and for each one, extracting it's text value. That value is then converted to lower case and all the spaces are replaced with dashes. This is to create the URL. Then we use the append() function to add additional HTML content to the #Listing_Agent_Staff element.

answered Aug 27, 2012 at 0:43

Lix

48.2k12 gold badges107 silver badges134 bronze badges

Comments

f1sherman · Accepted Answer · 2012-08-27 00:49:13Z

1

Agreed with the previous answer that it would be ideal to do this on the server side. If that won't work, the following should take care of it:

$(function() {
  $('.StaffName').each(function(e) {
    var div = $(this);
    var href = '/listing-agent-staff/' + div.text().toLowerCase().replace(' ', '-');
    $('#Listing_Agent_Staff').append('<option value="' + href +'">' + div.text() + '</option>');
  });
});

http://jsfiddle.net/hN67g/

answered Aug 27, 2012 at 0:49

f1sherman

4522 silver badges6 bronze badges

Comments

Kostia · Accepted Answer · 2012-08-27 00:41:17Z

0

This would mean having js write new code. The best solution is to have the server side code (php?) write out the dropdown code as well.

answered Aug 27, 2012 at 0:41

Kostia

6,3041 gold badge20 silver badges15 bronze badges

1 Comment

wang hai peng Over a year ago

thanks...uhm....due to some reason, the server side coding for me is untouchable, this is why i have to do this in jquery.

Collectives™ on Stack Overflow

jQuery take value and insert into dropdown menu and add url as option value

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related