Javascript 如何在Jquery中通过循环访问引导选择器值

我正在尝试使用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:

有人能告诉我怎么解决吗

提前感谢

您没有将所需的类添加到Selector select，因此它不会进入循环，因此它无法正常工作，您需要添加该类

此外，您的if条件应该类似于if$this.val！=

$document.on'click'，submitAjaxForm，function{ e、 防止违约； e、 停止传播； var isValid=0； $'.required'.eachfunction{ //从此元素中删除边框红色 $this.keyup函数{ $this.cssborder，1px固体ddd； }; $this.changefunction{ $this.next'span'.cssborder，1px固体ddd； }; $'.selectpicker'。在“更改”上，函数E{ $this.cssborder，1px固体ddd； $this.sides'.bootstrap select'.cssborder，1px实心ddd； }; //将边框红色设置为此元素 如果$this.val！={ isValid=1； $this.parent.cssborder，1px固体ddd； $this.parent.next'span'.cssborder，1px固体ddd； }否则{ isValid=0； $this.cssborder，1px纯红； $this.next'span'.cssborder，1px纯红； } }; 如果有效{ $'partisubmit'。触发'click'； } }; 地带* 区域* 选择区域 船舶/机构* 不 测验 第二部分* 不 测验 您没有将所需的类添加到Selector-Picker-select，因此它不会进入循环，因此它不起作用是正常的，您需要添加该类

此外，您的if条件应该类似于if$this.val！=

$document.on'click'，submitAjaxForm，function{ e、 防止违约； e、 停止传播； var isValid=0； $'.required'.eachfunction{ //从此元素中删除边框红色 $this.keyup函数{ $this.cssborder，1px固体ddd； }; $this.changefunction{ $this.next'span'.cssborder，1px固体ddd； }; $'.selectpicker'。在“更改”上，函数E{ $this.cssborder，1px固体ddd； $this.sides'.bootstrap select'.cssborder，1px实心ddd； }; //将边框红色设置为此元素 如果$this.val！={ isValid=1； $this.parent.cssborder，1px固体ddd； $this.parent.next'span'.cssborder，1px固体ddd； }否则{ isValid=0； $this.cssborder，1px纯红； $this.next'span'.cssborder，1px纯红； } }; 如果有效{ $'partisubmit'。触发'click'； } }; 地带* 区域* 选择区域 船舶/机构* 不 测验 第二部分* 不 测验

---

---

你到底想实现什么？我已经改进了我的问题@IslamelShobokshy如果能添加HTML并创建一个我添加的html@IslamElshobokshyWhat你是在试图准确地实现吗？我已经改进了我的问题@IslamelShobokshy如果能添加HTML并创建一个我已经添加的html@IslamElshobokshyPlease我再查一遍更新了问题@IslamElshobokshy@BabluAhmed我的代码中有什么不适合你？您更新了您的问题，添加了我在回答中提到并修复的内容。。。请检查提琴：-单击“提交”按钮时，仅显示红色边框，但如何删除边框颜色，没有设置选项@IslamElshobokshy@BabluAhmed什么不可以？打开小提琴。单击提交，所有内容都将显示为红色。打开中间的select，单击select all，单击submit，红色将消失。你没有得到和我一样的结果？船/机构和第二部分@Islam Elshobokshy的红色没有去除请再次检查我更新了问题@IslamElshobokshy@BabluAhmed我的代码中有什么不适合你？您更新了您的问题，添加了我在回答中提到并修复的内容。。。请检查提琴：-单击“提交”按钮时，仅显示红色边框，但如何删除边框颜色，没有设置选项@IslamElshobokshy@BabluAhmed什么不可以？打开小提琴。单击提交，所有内容都将显示为红色。打开中间的select，单击select all，单击submit，红色将消失。你没有得到和我一样的结果？船/机构和第二部分@Islam Elshobokshy的红色没有去除

<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>