javascript - 选择类别选项在提交时未检测到更改的尺寸？

Question

这是 HTML 代码；

<div class="size-selection___2RlA8">
    <div class="gl-form-item">
        <div class="gl-native-dropdown gl-native-dropdown--small" autoid="hello-size-selection-dropdown" data-auto-id="hello-size-selection-dropdown">
            <div class="gl-native-dropdown__select"><span class="gl-native-dropdown__select-label"><span class="gl-native-dropdown__select-label-text">Size</span></span>
                <svg class="gl-icon gl-native-dropdown__select-icon">
                    <use xlink:href="#dropdown"></use>
                </svg>
            </div>
            <select class="gl-native-dropdown__select-element">
                <option></option>
                <option value="FV6125_550">5</option>
                <option value="FV6125_570">6</option>
                <option value="FV6125_580">6.5</option>
                <option value="FV6125_590">7</option>
                <option value="FV6125_600">7.5</option>
                <option value="FV6125_610">8</option>
                <option value="FV6125_630">9</option>
                <option value="FV6125_640">9.5</option>
                <option value="FV6125_660">10.5</option>
                <option value="FV6125_670">11</option>
                <option value="FV6125_690">12</option>
                <option value="FV6125_710">13</option>
                <option value="FV6125_730">14</option>
            </select>
        </div>
    </div>
</div>

这是提交按钮；

<button type="button" class="gl-cta gl-cta--secondary add-to-cart-btn___35FqI" data-auto-id="ss-add-to-bag-btn"><span class="gl-cta__text">Submit</span>
    <svg class="gl-icon gl-cta__icon">
        <use xlink:href="#arrow-right-long"></use>
    </svg>
</button>

我正在做什么来更改下拉菜单选择；

$('.gl-native-dropdown__select-element > option').filter((i, el) => el.textContent === '6').prop('selected', true);

$('.gl-native-dropdown__select-label-text').text('6');

但是，如果我单击提交按钮，它仍然显示要选择尺寸。

我希望有一个 JQUERY 解决方案或任何完成此任务的提示。

谢谢

我在 JS 文件中发现的随机内容；

key: "render",
                value: function() {
                    var e = this.props
                      , t = e.elementId
                      , n = e.siteKey
                      , r = e.action
                      , o = e.onVerify
                      , a = e.onVerifyName
                      , u = e.onRef
                      , l = e.errorMessage
                      , d = (0,
                    i.default)(e, ["elementId", "siteKey", "action", "onVerify", "onVerifyName", "onRef", "errorMessage"])
                      , c = (0,
                    b.default)("gl-form-item", {
                        error: l
                    });

随机事物 2；

key: "render",
                value: function() {
                    var e = this.props
                      , t = e.className
                      , n = e.error
                      , r = e.errorMessageProps
                      , o = e.errorText
                      , a = e.hintText
                      , u = e.id
                      , l = e.inForm
                      , d = e.inline
                      , c = void 0 !== d && d
                      , f = e.input
                      , p = e.inputProps
                      , j = e.label
                      , _ = e.labelProps
                      , x = e.name
                      , w = e.required
                      , E = e.success
                      , S = e.title
                      , O = e.tooltip
                      , k = void 0 === O ? null : O
                      , T = e.value
                      , P = e.useFormValidation
                      , C = (0,
                    i.default)(e, ["className", "error", "errorMessageProps", "errorText", "hintText", "id", "inForm", "inline", "input", "inputProps", "label", "labelProps", "name", "required", "success", "title", "tooltip", "value", "useFormValidation"])
                      , M = this.state
                      , N = M.isChecked
                      , A = M.hasFocus
                      , R = !!P && w;
                    return m.default.createElement(y, {
                        condition: l || k
                    }, m.default.createElement("div", {
                        className: (0,
                        h.default)("gl-form-item", {
                            inline: c || k,
                            error: n,
                            hasFocus: A,
                            required: w,
                            success: E
                        })

随机事物 3

key: "render",
                value: function() {
                    var e = this.props
                      , t = e.hint
                      , n = e.className
                      , r = e.type
                      , o = e.maxLength
                      , a = e.name
                      , u = e.placeholder
                      , l = e.required
                      , d = e.max
                      , c = e.min
                      , f = e.noIcon
                      , p = e.valid
                      , b = e.value
                      , y = e.useFormValidation
                      , j = e.tabIndexer
                      , _ = e.centered
                      , x = e.labelCustomProps
                      , w = (0,
                    i.default)(e, ["hint", "className", "type", "maxLength", "name", "placeholder", "required", "max", "min", "noIcon", "valid", "value", "useFormValidation", "tabIndexer", "centered", "labelCustomProps"])
                      , E = this.id
                      , S = this.state
                      , O = S.hasFocus
                      , k = S.hasValue
                      , T = !f && "boolean" == typeof p
                      , P = !1 === p
                      , C = !0 === p
                      , M = O || k
                      , N = y || l
                      , A = Boolean(u || l);
                    return m.default.createElement("div", {
                        className: (0,
                        h.default)("gl-form-item", {
                            error: P,
                            hasFocus: O,
                            required: l,
                            success: C
                        })

最后随机的事情；

key: "render",
                value: function() {
                    var e = this.props
                      , t = e.id
                      , n = e.name
                      , r = e.value
                      , o = e.label
                      , s = e.required
                      , i = e.useFormValidation
                      , a = e.valid
                      , u = e.error
                      , l = e.tabIndexer
                      , m = e.centered
                      , h = e.className
                      , v = void 0 === h ? "" : h
                      , b = e.min
                      , g = e.max
                      , y = e.onChange
                      , j = e.onFocus
                      , _ = e.onBlur;
                    return d.default.createElement("div", {
                        className: (0,
                        c.join)((0,
                        c.default)("gl-form-item", {
                            error: u,
                            isRequired: s
                        }), p("col"), "".concat(p(), " ").concat(v))
                    }, d.default.createElement(f.GlInput, {
                        id: t,
                        name: n,
                        value: r,
                        placeholder: o,
                        type: "number",
                        required: s,
                        useFormValidation: i,
                        valid: a,
                        noIcon: !0,
                        min: b,
                        max: g,
                        centered: m,
                        tabIndexer: l,
                        onChange: y,
                        onFocus: j,
                        onBlur: _
                    }))

Answer 1

这将选择该值并添加它，

    let selectedValue = 'FV6125_570';

    let select = document.querySelectorAll('.gl-native-dropdown__select-element')[0];
    let btn = document.querySelectorAll('[data-auto-id="ys-add-to-bag-btn"]')[0];
    select.value= selectedValue;
    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLSelectElement.prototype, "value").set;
    nativeInputValueSetter.call(select, selectedValue);
    var ev2 = new Event('change', { bubbles: true});
    select.dispatchEvent(ev2);

    btn.click()