Question

我有以下自动生成的代码，我希望jQuery代码帮我取出div中的值并添加到下拉菜单中，并添加“/ listing-agent-staff / barack-obama”作为选项值。

自动生成的代码：

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

下拉菜单我希望将值插入到：

<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>

请注意第一部分是自动生成的，因此记录数量会有所不同，第二部分中的选项数量应该与之相应。谢谢。

Answer 1

使用以下内容：

$(".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");
});

这是 DEMO 。

Answer 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);

这是小提琴：http://jsfiddle.net/MCKZ7/

Answer 3

您所要做的就是遍历所有StaffName元素，并将适当的HTML附加到选择中。

$.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>';
});

我们在这里做的是迭代所有.StaffName元素，并为每个元素提取它的文本值。那么该值为converted to lower case，所有空格都为replaced，带有破折号。这是为了创建URL。然后，我们使用append()函数将其他HTML内容添加到#Listing_Agent_Staff元素。

Answer 4

同意之前的回答，在服务器端执行此操作是理想的。如果这不起作用，以下应该照顾它：

$(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/

Answer 5

这意味着让js写新代码。最好的解决方案是让服务器端代码（php？）写出下拉代码。

jQuery获取值并插入下拉菜单并添加url作为选项值

5 个答案: