Javascript 将选定选项div上的选定值div从一个包装更改为另一个包装

CSS:

这是我的密码，有人能帮我吗，我被困在这件事里了

我有一个复选框，我必须先选中复选框，然后当我从下拉列表中选择骑手名称时，所选div将移动到所选骑手列表。 我添加了一个快照，前端清晰，提前感谢，等待回复

请查看下面的图片链接

---

[1] ：

如果您包含页面中呈现的代码会更好，还请包含所有相关代码，如css、jqueryCarsten，我已使用css和jQuery更新了我的代码，请立即检查@NabeelMYousuf您是否要将order one div移到selected div正确？是@Jishan不仅仅是order 1，我选中的选中div将移动到选中的rider BodyOK，@NabeelMYousuf您可以为当前的每个属性和模型属性添加HTML源代码吗。只需检查HTML，然后单击此处复制并添加，以便任何人都可以添加答案。

<div class="zones-riders-wrapper">
    <div class="zones-rider-header">
        <div class="row">
            <div class="col-md-6">
                <h5 class="rider-name">@drv.Drivername</h5>
            </div>
            <div class="col-md-6">
                <p class="rider-trips">Weight/Trip (@drv.DriverCapacity)</p>
            </div>
        </div>
    </div>

    <div class="zones-filters">
        <select>
            <option>Move To</option>
            @foreach (var drvName in Model.zoneDriver.Where(x => x.ZoneName == item.ZoneName))
            {
                <option>
                    @drvName.Drivername
                </option>
            }
        </select>
    </div>
    <div id="zones-trips-body" class="zones-trips-body">
        @foreach (var ord in Model.orderDetails.Where(x => x.ZoneName == item.ZoneName && x.DriverId == drv.DriverId))
        {
        <input class="zoneBodyId" type="hidden" value="@drv.DriverId" />
        <div class="zones-trip">
            @*<input type="checkbox" />*@
            <label for="chkIsActive">
                <div class="zone-check">
                    <input type="checkbox" name="IsActive" class="chkIsActive" class="switch">
                    <div class="zone-check-overlay"></div>
                </div>
                <div class="zone-order-id">
                    <label>Order ID</label>
                    <span>@ord.OrderId</span>
                </div>
                <div class="zone-order-receiver">
                    <label>Receiver Name</label>
                    <span>@ord.RecieverName</span>
                </div>
                <div class="zone-order-sender">
                    <label>Receiver Add.</label>
                    <span>@ord.RecieverAddress</span>
                </div>

            </label>
        </div>
        }
    </div>
</div>

$(".zones-trip").click(function () {
    $(this).find(".chkIsActive").click();
    var zoneBox = $(this).closest(".zones-trip").html();
    console.log(zoneBox);
    //$(this).remove();
     
 });
 $(document).on("change", ".zones-filters select", function () {
    var selectValue = $(".zones-filters select option:selected").val();
    console.log(selectValue);
 });

.zone-check {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.zone-check input[type=checkbox] {
    opacity: 0;
    position: absolute;
    right: 20px;
    top: 22px;
}
.zone-check input[type=checkbox]:checked + .zone-check-overlay {
    display: inline-block;
    width: 100%;
    position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    border-radius: 7px;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5242471988795518) 18%, rgba(255,255,255,1) 100%);
}
    .zone-check input[type=checkbox]:checked {
        opacity: 1;
        z-index: 1;
    }
.zones-trip {
    position: relative;
}