2

我有以下自动生成的代码，我希望 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>

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

4

5 回答 5

3

使用以下内容：

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

这是一个演示。

于 2012-08-27T00:43:07.523 回答
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/

于 2012-08-27T00:43:20.343 回答
1

您所要做的就是遍历所有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元素，并为每个元素提取它的文本值。然后将该值转换为小写，并将所有空格替换为破折号。这是创建 URL。然后我们使用该append()函数向#Listing_Agent_Staff元素添加额外的 HTML 内容。

于 2012-08-27T00:43:17.727 回答
1

同意前面的回答，最好在服务器端执行此操作。如果这不起作用，则应采取以下措施：

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

于 2012-08-27T00:49:13.827 回答
0

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

于 2012-08-27T00:41:17.687 回答