Question

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

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

Answer 1

$("select").change(function(){
    var text = $("select option:selected")
        .not(":contains('Select one')")
        .text();
    $("<div>")
        .html( text )
        .appendTo("#container");
});

Example

我们在更改select时触发此功能（选择了新选项）。

该函数获取所选选项的文本，并将其作为新的div附加到容器中。

如果选中它，它也会忽略Select one选项。

Answer 2

这正是你告诉它要做的事情。您的最终$（'选项：已选中'）只是选择页面上的所有选定选项。此外，无需遍历所有选择，因为您只需选择选项并迭代它们即可。最后，无需将所选选项转换为文本，只需将其添加到html字符串中，然后将其转换回元素。以下是我将如何解决您的问题：

//select all selected options and iterate through them
//there is no need to select the selects because there should be no options outside a select
$('#receivecontainer option:selected').each(function() {
    var newDiv = $('<div></div>').html($(this).text()); //create an empty div and fill it with the contents of the option
    $(this).replaceWith(newDiv); //replace the option with the created div
});

出于好奇，确实在选择的工作中设置div并且在浏览器中保持一致吗？我不指望它。

Answer 3

我想出的解决方案是抓取所选的选项并将其添加到放置在该选择元素之后的div中。然后返回并删除元素，然后继续下一个选择。

$('#receivecontainer select').each(function() { 
            var selectvalue = $("option:selected", this).text();
            $('<div class="answer">' +selectvalue+ '</div>').insertAfter(this);
            $(this).remove();
 });

替换选择选项：用div选择

3 个答案: