Установка значения раскрывающегося списка, связанного с узлом идентификатора в том же разделе HTML

Я хочу выбрать конкретное раскрывающееся значение из десятков раскрывающихся списков HTML для пользовательского скрипта. Есть ли способ сделать это, используя мой идентификатор ({"Id":"302"})?

Я пытался выбрать все элементы на основе класса в качестве отправной точки, но у меня не было большого успеха. В идеале, если бы я мог выбирать на основе предоставленного идентификатора, это позволило бы мне быть более конкретным при выборе.

Что я имею:

waitForDropdown (".control:has(option[value='See Notes'])", selectDropdown);

function selectDropdown (jNode) {
    var evt = new Event ("click");
    jNode[0].dispatchEvent (evt);

    jNode.val('See Notes');

    evt = new Event ("change");
    jNode[0].dispatchEvent (evt);
}

Это HTML:

<div class="field tabular">
    <span class="item-data">{"Id":"302"}</span>
    <div class="field-content">
        <div class="title" title="Dropdown A">Dropdown A</div>
        <div class="data">
            <div class="errors"></div>
            <div class="control">
                <select>
                    <option value="Not Checked" selected="selected">Not Checked</option>
                    <option value="Checked &amp; Cleaned">Checked &amp; Cleaned</option>
                    <option value="Not Applicable">Not Applicable</option>
                    <option value="See Section Notes">See Notes</option>
                </select>
    <!-- Etc... -->

Могу ли я использовать название, чтобы сузить выбор? Или ID будет иметь больше смысла?


person Patrick    schedule 08.04.2018    source источник
comment
Вопрос не ясен. Вы говорите, что хотите сузить круг через "Id":"302"? Если да, то является ли 302 известным стабильным значением? ... Также waitForDropdown не определено, а селектор value не соответствует ни одному параметру value (применяются точные правила).   -  person Brock Adams    schedule 08.04.2018
comment
Извинения @BrockAdams. Надеюсь, это проясняет. Я ищу, чтобы выбрать значение для раскрывающегося списка на основе идентификатора (Id: 302). 302 — известное стабильное значение. Вот с чем я играл: $("div.control select").val("Checked & Good"); Однако я хотел бы сделать его более конкретным либо для Id: 302, либо даже для раскрывающегося списка A, но в этом случае у меня возникли проблемы с добавлением дополнительных селекторов.   -  person Patrick    schedule 08.04.2018
comment
Мы действительно работаем над одним и тем же проектом для работы. Есть ли ресурсы, которые вы могли бы предложить, чтобы выбрать заголовок Dropdown A для объединения с div.control select, учитывая способ вложения заголовка? Я ковыряюсь в этом уже пару часов без особого успеха.   -  person Patrick    schedule 08.04.2018
comment
Очень признателен. Спасибо. Я буду продолжать пробовать вещи.   -  person Patrick    schedule 08.04.2018


Ответы (1)


Чтобы ответить на ваш вопрос: "Could I use the title to narrow the selection? Or would the ID make more sense?"

обычно лучше всего подходит стабильный числовой идентификатор. Заголовок или другой текст подлежит: редактированию или переводу/интернационализации. Но если идентификатор меняется от страницы к странице или при перезагрузке страницы; не используйте его.

Есть несколько проблем с этим кодом:

  1. waitForDropdown() не является ни стандартным, ни определенным. Вопросы должны содержать MCVE.
    В этом случае это выглядит как возможная версия waitForKeyElements — - который теперь является обычным, стандартным и проверенным в бою.
  2. Селектор: option[value='See Notes'] не соответствует ни одному HTML.
    См. jQuery Документация по селекторам атрибутов.
  3. jNode.val('See Notes'); пытается установить недопустимое значение.
  4. jNode.val('See Notes'); работает на <div class="control">. Он должен работать на <select>.

В любом случае, сопутствующий вопрос иллюстрирует обход дерева сверху вниз чтобы получить правильные узлы. Итак, здесь я проиллюстрирую подход «снизу вверх». Он также поддерживает AJAX, в отличие от другого ответа.
См. документы обхода дерева jQuery.

Вот полный пользовательский скрипт, который показывает, как различать параметры на основе связанного узла/идентификатора. (Пользовательский скрипт — это только первый серый блок):

// ==UserScript==
// @name     _Set <select> value under specific HTML section id
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

waitForKeyElements (".control > select > option[value$='Cleaned']", selectId302Value);

function selectId302Value (jNode) {
    //-- Make sure control belongs to the correct id:
    var idNode  = jNode.closest (".field-content").prev (".item-data");
    if (idNode.length === 0) {
        console.error ("Page structure changed or invalid in selectId302Value().");
        return;
    }
    if (idNode.text ().includes ('"302"') ) {
        var evt     = new Event ("click");
        jNode[0].dispatchEvent (evt);

        //-- Correct val already determined by WFKE selector.
        jNode.parent ().val(jNode.val () );

        //-- The select node would get any required change event.
        evt         = new Event ("change");
        jNode.parent ()[0].dispatchEvent (evt);
    }
}
<!----------------------------------------
----- Simulated target page follows: -----
----------------------------------------->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//greasyfork.org/scripts/2199-waitforkeyelements/code/waitForKeyElements.js"></script>
<div class="field tabular">
    <span class="item-data">{"Id":"302"}</span>
    <div class="field-content">
        <div class="title" title="Dropdown A">Dropdown A</div>
        <div class="data">
            <div class="errors"></div>
            <div class="control">
                <select>
                    <option value="Not Checked" selected="selected">Not Checked</option>
                    <option value="Checked &amp; Cleaned">Checked &amp; Cleaned</option>
                    <option value="Not Applicable">Not Applicable</option>
                    <option value="See Section Notes">See Notes</option>
                </select>
    </div></div></div>

    <span class="item-data">{"Id":"777"}</span>
    <div class="field-content">
        <div class="title" title="Dropdown B">Dropdown B</div>
        <div class="data">
            <div class="errors"></div>
            <div class="control">
                <select>
                    <option value="Not Checked" selected="selected">Not Checked</option>
                    <option value="Checked &amp; Cleaned">Checked &amp; Cleaned</option>
                    <option value="Not Applicable">Not Applicable</option>
                    <option value="See Section Notes">See Notes</option>
                </select>
    </div></div></div>
</div>

Запустите фрагмент кода, чтобы увидеть его в действии.

person Brock Adams    schedule 08.04.2018
comment
Спасибо Брок! Это очень тщательно, и я обязательно сделаю свои вопросы более ясными в будущем. - person Patrick; 09.04.2018
comment
Я столкнулся с проблемой с этим. События, чтобы щелкнуть и изменить значения раскрывающегося списка, срабатывают нормально, однако эти поля находятся в форме, и когда я перехожу к сохранению формы, вновь выбранные значения игнорируются. Только значения, выбранные с помощью ручного щелчка и выбора, будут сохранены с новыми значениями. - person Patrick; 11.04.2018
comment
Сначала попробуйте обновленный код, но это выходит за рамки этого вопроса, поскольку ни фактическая целевая страница, ни MCVE не были предоставлены. ... См. этот связанный вопрос за помощью, если требуется дополнительная настройка. Если вы зашли в тупик, откройте новый вопрос, но он должен либо ссылаться на целевую страницу, либо предоставлять MCVE. - person Brock Adams; 12.04.2018