Имитация кликов пользователей с использованием JavaScript или JQuery

Есть сайт, на котором я хочу симулировать клики пользователей. На этом сайте есть следующий div, назовем его div1, где есть выпадающее меню. На самом деле есть два других подобных div (давайте назовем их div2 и div3), но я не остановился здесь на простоте. Когда вы выбираете один из элементов в раскрывающемся меню в div1, включается div2 (по умолчанию он отключен), а содержимое его меню выбирается из базы данных на основе элемента, выбранного из div1.

Я могу выбрать пункт меню, используя следующий скрипт.

Код:

function setSelectedValue(selectObj, valueToSet) { 
    for (var i = 0; i < selectObj.options.length; i++) { 
        if (selectObj.options[i].value== valueToSet) {
            selectObj.options[i].selected = true;
            return;
       }
      }
     }

var number = document.getElementById('level1-option');
setSelectedValue(number,  "p3");

Однако, когда я делаю это, div2 никогда не включается. Я попытался jQuery-код выдать сигнал изменения в выпадающем меню, но он не работает. Когда я отлаживал приведенный ниже html-код, я увидел там метку кнопки и сразу подумал, что она отправляется при нажатии. Тем не менее, я не вижу никакой формы. Если я отлаживаю веб-сайт с помощью Chrome, я вижу, что код переходит на разные файлы JS, когда я выбираю пункт в меню. Может ли кто-нибудь подсказать мне, как я могу узнать, какой сигнал срабатывает при выборе элемента? Видимо, они делают некоторые трюки на веб-сайте, чтобы предотвратить обычные способы нажатия

Код:

<div data-custom-select="" class="custom-select focus">
  <label for="level1-option" class="has-hidden-label label-text">Sections</label>
  <span class="btn-select icon-down_thin">Choose a section</span>
  <select class="categories-options" data-level="1" name="level1-option" id="level1-option" required="">
    <option value="">Choose a section</option>
    <option value="p1" data-href="/callback/discovery/p1/">P1</option>
    <option value="p2" data-href="/callback/discovery/p2/">P2</option>
    <option value="p3" data-href="/callback/discovery/p3/">P3</option>
    <option value="p4" data-href="/callback/discovery/p4/">P4</option>
  </select>
<span class="icon-down_thin"></span>
<button type="submit" class="category-submit ui-button-secondary ">Choose</button>
Источник

4 ответа

Решение

Обычно вы можете использовать:

$("#level1-option").val(valueToSet).trigger("click")

или же

$("#level1-option").val(valueToSet).trigger("change")

но это может зависеть от остальной части кода на веб-странице.

Источник

Извините, что я не мог помочь с проблемой наложения. Ваша разметка довольно сложная.

Во всяком случае, я немного кодировал для обновления / выборки данных из базы данных. Пожалуйста, найдите ниже демонстрацию этого. Демоверсия также здесь на jsFiddle

Данные JSON выглядят так {"data": ["1st_1", "1st_2", "1st_3"]}

Во время моей работы у меня была одна проблема, которую было нелегко решить, но здесь помог другой вопрос. Если бы вы только использовали change событие, которое вы не можете вызвать первый элемент, чтобы получить ваши следующие данные. Контр трюк работает довольно хорошо.

var dynamicOptions = (function () {

    var url; // here you can add your url to the backend script
    // urlList only required for demo because no backend available
    var urlList = ['http://www.mocky.io/v2/54839e2a2f4b84a0041bba49',
        'http://www.mocky.io/v2/54839e4c2f4b84a5041bba4a',
        'http://www.mocky.io/v2/54839e6a2f4b84a9041bba4b'];
    
    var cc = 0; // click counter

    // e.g. $optionEl = $('#firstSelection');
    // $nextOptionEl = $('#secondSelection');
    function Selector($optionEl, $nextOptionEl) {
        this.$optionEl = $optionEl;
        this.$nextOptionEl = $nextOptionEl;
       
        this.ajaxRequest = function (optionValue) {
            return $.ajax({
                type: 'GET', // later 'POST'
                //data: {'data': optionValue}, // for posting
                url: url,
                contentType: "application/json",
                dataType: 'jsonp',
                context: this,
            });
        };
      
        this.getData = function(value) {
            url = urlList[value]; // simulating backend returns based on this value
            var ajaxReq = this.ajaxRequest(value); // this.value not used in this demo
            ajaxReq.success(this.jsonCallback)
                .fail(function (xhr) {
                alert("error" + xhr.responseText);
            });
        };
        // handle click and change event. Source from here: https://stackru.com/questions/11002421/jquery-event-to-fire-when-a-drop-down-is-selected-but-the-value-is-not-change
        this.clickHandler = function ($element) {
            //console.log($element);
            var that = this;
            return $element.click(function () {
                //console.log('clicked');
                cc++;
                if (cc == 2) {
                    $(this).change();
                    cc = 0;
                }
            }).change(function (e) {
                cc = -1; // change triggered
                //console.log(this.value);
                that.getData(this.value);
            });
        }

        this.clickHandler($optionEl);

        this.jsonCallback = function (json) {
            var $nextEl = this.$nextOptionEl;
            $nextEl.empty();                    // clear selection
            $nextEl.prop('disabled', false);    // enable 2nd select
           
            this.triggerChangeEvent(); // maybe a check if they really changed would be good
            $.each(json.data, function (index, value) {
                $('<option/>')
                    .val(index)
                    .text(value)
                    .appendTo($nextEl);
            });
        };

        this.triggerChangeEvent = function () {
            var event = jQuery.Event("optionsChanged");
            event.context = this;
            event.message = "Options changed, update other depending options";
            event.time = new Date();

            $.event.trigger(event);
        };
    }

    return {
        Selector: Selector
    }; // make Selector public
})();

$(function () {
    var $first = $('#firstSelection');
    var $second = $('#secondSelection');
    var $third = $('#thirdSelection');

    // use our dynamic options selector class
    var options12 = new dynamicOptions.Selector($first, $second);
    var options23 = new dynamicOptions.Selector($second, $third);

    $(document).on('optionsChanged', function (e) {
        console.log("options changed", e);
        var obj_id = e.context.id;
        //console.log(obj_id);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div>
    <form role="form">
        <div class="form-group">
            <label>Please select first value:</label>
            <select id="firstSelection" class="form-control">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
        <div class="form-group">
            <label>Please select second value:</label>
            <select id="secondSelection" class="form-control" disabled="true">
                <!-- fetched from server -->
            </select>
        </div>
        <div class="form-group">
            <label>Please select third value:</label>
            <select id="thirdSelection" class="form-control" disabled="true">
                <!-- fetched from server -->
            </select>
        </div>
    </form>
</div>

Источник

Попробуйте отправить onchange событие, как только вы изменили его значение:

var number = document.getElementById('level1-option');
setSelectedValue(number,  "p3");
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
number.dispatchEvent(evt);
Источник

Пытаться...

$ (element).trigger ('click');

... из jQuery.

Источник
Другие вопросы по тегам