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…</p></div>
    <div id="box2"><p>Box 2 stuff…</p></div>
    <div id="box3"><p>Box 3 stuff…</p></div>
    <div id="box4"><p>Box 1 stuff…</p></div>
    <div id="box5"><p>Box 2 stuff…</p></div>
    <div id="box6"><p>Box 3 stuff…</p></div>
</div>

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

如何实现？提前谢谢！

Answer 1

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

<div id="boxes">
    <div id="box1" class="resultBox"><p>Box 1 stuff…</p></div>
    <div id="box2" class="resultBox"><p>Box 2 stuff…</p></div>
    <div id="box3" class="resultBox"><p>Box 3 stuff…</p></div>
    <div id="box4" class="resultBox"><p>Box 1 stuff…</p></div>
    <div id="box5" class="resultBox"><p>Box 2 stuff…</p></div>
    <div id="box6" class="resultBox"><p>Box 3 stuff…</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

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

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());
              }
       });

使用jQuery，选择一个Div by id，从下拉列表中选择并在另一个Div中绘制

3 个答案: