Question

我正在尝试获取特定内容中的所有元素并捕获所选的选项，然后将选择框替换为包含所选选项的选项。这是我到目前为止的代码，但它不起作用。它将页面上所有选择框中的所有选定选项复制到每个div中，而不仅仅是在它替换的select标签中选择的那个。

$('#receivecontainer select').each(function() {  
 $('#receivecontainer select option:selected').each(function() { 
            var optionselected = $(this).text();
    $('select').replaceWith(function() { 
      return $('<div>' + $(optionselected).text() + '</div>'); 
     }); 
   });
 });

Answer 1

尝试;

$('#receivecontainer select').each(function() {  
 $('#receivecontainer select option:selected').each(function() { 
            var optionselected = $(this).text();
    $('select').replaceWith(function() { 
      return $('' + optionselected + ''); 
     }); 
   });
 });

Answer 2

此代码应该有效：

$('#receivecontainer select').each(function() {
    var sel_text = $(this).find('option:selected').text();
    $(this).replaceWith(function(){
        return $("<div>" + sel_text + "</div>");
    })
});

无论如何，你是否考虑过禁用选择 - 并且可能使用css让它们看起来更漂亮？

更新

没有必要使用回调作为replaceWith的参数;这也有效：

$('#receivecontainer select').each(function() {
    var sel_text = $(this).find('option:selected').text();
    $(this).replaceWith("<div>" + sel_text + "</div>");
});

您可以在此处测试：http://jsfiddle.net/PwvrL/6/

更新 - 甚至更短的代码

您还可以在选择框中使用.val()来获取当前所选项目的文字;这样你就可以编写更短的代码：

$('#receivecontainer select').each(function() {
    $(this).replaceWith("<div>" + $(this).val() + "</div>");
});

请参阅更新后的示例：http://jsfiddle.net/PwvrL/11/

选择每个select元素并替换为包含select：选项的div

2 个答案:

更新

更新 - 甚至更短的代码