javascript - 使用 jQuery，通过 id 选择一个 Div，通过从下拉列表中选择并将其绘制在另一个 Div 中

Question

这是未完成的脚本：

<script type="text/javascript">
        $(document).ready(function(){
           $('#box1').hide();
           $('#box2').hide();
           $('#box3').hide();
           $("#thechoices").change(function(){
              if(this.value == 'all'){
                     $("#boxes").children().show();
                  }else{
                     $("#" + this.value).show().siblings().hide();
                  }
           });          
           $("#thechoices").change(); 
        });
</script>

---

HTML是：

<div id="SelectedBoxContainer">
    <!--Selected DivByID goes here-->
</div>


<!--Selected one of these Divs-->
<div id="boxes">
    <div id="box1"><p>Box 1 stuff…&lt;/p></div>
    <div id="box2"><p>Box 2 stuff…&lt;/p></div>
    <div id="box3"><p>Box 3 stuff…&lt;/p></div>
    <div id="box4"><p>Box 1 stuff…&lt;/p></div>
    <div id="box5"><p>Box 2 stuff…&lt;/p></div>
    <div id="box6"><p>Box 3 stuff…&lt;/p></div>
</div>

我需要的是使用 Dropdownlist 从div id="boxes"中选择一个 div并将其绘制在div id="SelectedBoxContainer"内，

如何做到这一点？提前致谢！

Answer 1

您可以使用 来移动 div .appendTo()，但您的 HTML 目前不太适合维护它。我会在<div>正在显示/隐藏/移动的 s 上放置一个类，以便您可以更轻松地跟踪它们：

<div id="boxes">
    <div id="box1" class="resultBox"><p>Box 1 stuff…&lt;/p></div>
    <div id="box2" class="resultBox"><p>Box 2 stuff…&lt;/p></div>
    <div id="box3" class="resultBox"><p>Box 3 stuff…&lt;/p></div>
    <div id="box4" class="resultBox"><p>Box 1 stuff…&lt;/p></div>
    <div id="box5" class="resultBox"><p>Box 2 stuff…&lt;/p></div>
    <div id="box6" class="resultBox"><p>Box 3 stuff…&lt;/p></div>
</div>

现在您可以重写您的更改处理程序：

$("#thechoices").change(function(){
    if(this.value == 'all'){
        $(".resultBox").appendTo($("#SelectedBoxContainer")).show();
    }else{
        $(".resultBox:not(#" + this.value + ")").hide().appendTo($("#boxes"));
        $("#" + this.value).appendTo($("#SelectedBoxContainer")).show();
    }
});

诀窍是当 .appendTo() 只有一个目标元素时，jQuery 将移动而不是克隆 DOM 中已经存在的元素。

请注意，此解决方案不会保留 div 的顺序。由于它隐藏了未选中的那些，因此只有在全部选中时才会出现问题。

Answer 2

如果您只想在 中显示它们，则不需要显示和隐藏 div SelectedBoxContainer，您可以执行以下操作：

var selectBox = $('#SelectedBoxContainer')
selectBox.empty();

var clone = $("#" + this.value).clone();
clone.appendTo(selectBox);
clone.show();

Answer 3

假设您在更改事件后获得的值与 div id 匹配。

试试这个

$("#thechoices").change(function(){
          if(this.value == 'all'){
                 $("#boxes").children().show();
              }else{
                  $("#" + this.value).show().siblings().hide();
                  $('#SelectedBoxContainer').html($("#" + this.value).clone());
              }
       });