Question

我想创建一个单独的选择DOM，并使用不同的属性多次添加它。这是我的代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="foo"></div>

    <script>
        $(document).ready(function(){
            var select = $('<select></select>').attr('class', 'form-control input-sm serial_no');
            select.append('<option value="hello">Hello</option>');
            $('#foo').append(select.attr('id','one'));
            $('#foo').append(select.attr('id','two'));
        });
    </script>

</body>

仅添加ID为2的一个选择。我该如何实现？

Answer 1

它不是附加的，因为它是相同的元素。您只是在更改元素的属性并再次追加，但是元素是相同的。您必须创建另一个select元素并将其添加

        $(document).ready(function(){
            var select = $('<select></select>').attr('class', 'form-control input-sm serial_no');
            select.append('<option value="hello">Hello</option>');
             var select1 = $('<select></select>').attr('class', 'form-control input-sm serial_no');
            select1.append('<option value="hello">Hello</option>');
            $('#foo').append(select.attr('id','one'));
            $('#foo').append(select1.attr('id','two'));
        });

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="foo"></div></body>

Answer 2

您可以克隆它并将其应用于

select.clone(true)

$(document).ready(function(){
            var select = $('<select></select>').attr('class', 'form-control input-sm serial_no');
            select.append('<option value="hello">Hello</option>');
            debugger
            $('#foo').append(select.clone(true).attr('id','one'));
            $('#foo').append(select.clone(true).attr('id','two'));
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo"></div>

为什么jQuery选择DOM而不是附加DOM？

2 个答案: