如何通過在Jquery中循環訪問Bootstrap selectpicker值

Question

我正在嘗試使用jquery執行一個簡單需要的驗證。 因此，我需要通過循環訪問所有元素的值，以便可以檢查值是否存在。 除了jquery selectpicker之外，其他一切都正常。 我正在嘗試如下：

// validation
$(document).on('click',"#submitAjaxForm",function (e) {
    e.preventDefault();
    e.stopPropagation();

    var isValid=0;
    $('.required').each(function () {

        // remove border red color from this element
        $(this).keyup(function () {
            $(this).css("border", "1px solid #ddd");
        });
        $(this).change(function () {
            $(this).next('span').css("border", "1px solid #ddd");
        });
        $('.selectpicker').on('change', function (e) {
            $(this).css("border", "1px solid #ddd");
            $(this).siblings('.bootstrap-select').css("border", "1px solid #ddd");
        });

        // set border red color to this element
        if ($(this).val())
        {
            isValid=1;
            $(this).css("border", "1px solid #ddd");
            $(this).next('span').css("border", "1px solid #ddd");
        }
        else
        {
            isValid=0;
            $(this).css("border", "1px solid red");
            $(this).next('span').css("border", "1px solid red");
        }
    });

    if(isValid)
    {
        $('#partiiSubmit').trigger('click');
    }
});

HTML：

<div class="row">
    <div class="form-group col-sm-12">
        <div class="col-sm-6">
            <label class="col-sm-5 control-label">Zone<span class="text-danger">*</span></label>
            <div class="col-sm-6">
                <?php echo form_dropdown("zone", $zone, set_value("zone"), "class='select2 form-control required' id='zone' data-tags='true' data-allow-clear='true' data-placeholder='Select zone'"); ?>
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-3 control-label">Area<span class="text-danger">*</span></label>
            <div class="col-sm-6">
                <select id="area" name="area" class="select2 form-control required" data-tags="true" data-allow-clear="true" data-placeholder="Select Area">
                    <option value=""> Select Area</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group col-sm-12">
        <div class="form-group col-sm-6">
            <label class="col-sm-5 control-label">Ship/Establishment<span class="text-danger">*</span></label>
            <div class="col-sm-6">
                <select class="selectpicker form-control required" data-live-search="true" name="shiftEstablishment[]" id="shift" data-placeholder="Select Ship/Establishment" multiple data-actions-box="true">
                </select>
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-3 control-label">Part-II<span class="text-danger">*</span></label>
            <div class="col-sm-6">
                <select class="selectpicker form-control required" data-live-search="true" name="partiiName[]" id="partiiID" data-placeholder="Select Part-II Name" multiple data-actions-box="true">
                    <option value="">Select One</option>
                    <?php
                    foreach ($partii as $row) {
                        ?>
                        <option value="<?php echo $row->PartIIID ?>"><?php echo $row->Name ?></option>
                        <?php
                    }
                    ?>
                </select>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-12 text-center">
        <input type="button" class="btn btn-info" id="submitAjaxForm" value="Submit">
        <input type="hidden" class="btn btn-info" id="partiiSubmit" value="Submit">
    </div>
</div>

誰能告訴我如何解決？

提前致謝

Answer 1

您沒有在selectpicker select中添加required類，因此它不會進入循環，因此正常工作是不正常的，您需要添加類。

另外，您的if條件應類似於if ($(this).val() != "")

 $(document).on('click', "#submitAjaxForm", function(e) { e.preventDefault(); e.stopPropagation(); var isValid = 0; $('.required').each(function() { // remove border red color from this element $(this).keyup(function() { $(this).css("border", "1px solid #ddd"); }); $(this).change(function() { $(this).next('span').css("border", "1px solid #ddd"); }); $('.selectpicker').on('change', function(e) { $(this).css("border", "1px solid #ddd"); $(this).siblings('.bootstrap-select').css("border", "1px solid #ddd"); }); // set border red color to this element if ($(this).val() != "") { isValid = 1; $(this).parent().css("border", "1px solid #ddd"); $(this).parent().next('span').css("border", "1px solid #ddd"); } else { isValid = 0; $(this).css("border", "1px solid red"); $(this).next('span').css("border", "1px solid red"); } }); if (isValid) { $('#partiiSubmit').trigger('click'); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <div class="row"> <div class="form-group col-sm-12"> <div class="col-sm-6"> <label class="col-sm-5 control-label">Zone<span class="text-danger">*</span></label> </div> <div class="form-group col-sm-6"> <label class="col-sm-3 control-label">Area<span class="text-danger">*</span></label> <div class="col-sm-6"> <select id="area" name="area" class="select2 form-control required" data-tags="true" data-allow-clear="true" data-placeholder="Select Area"> <option value=""> Select Area</option> </select> </div> </div> </div> <div class="form-group col-sm-12"> <div class="form-group col-sm-6"> <label class="col-sm-5 control-label">Ship/Establishment<span class="text-danger">*</span></label> <div class="col-sm-6"> <select class="selectpicker required form-control" data-live-search="true" name="shiftEstablishment[]" id="shift" data-placeholder="Select Ship/Establishment" multiple data-actions-box="true"> <option value="">no</option> <option value="1">test</option> </select> </div> </div> <div class="form-group col-sm-6"> <label class="col-sm-3 control-label">Part-II<span class="text-danger">*</span></label> <div class="col-sm-6"> <select class="selectpicker required form-control" data-live-search="true" name="partiiName[]" id="partiiID" data-placeholder="Select Part-II Name" multiple data-actions-box="true"> <option value="">no</option> <option value="1">test</option> </select> </div> </div> </div> <div class="clearfix"></div> <div class="col-sm-12 text-center"> <input type="button" class="btn btn-info" id="submitAjaxForm" value="Submit"> <input type="hidden" class="btn btn-info" id="partiiSubmit" value="Submit"> </div> </div> 

JSFiddle： https ://jsfiddle.net/8qx2zr9b/5/