0

Внутри одного блока (div) на совершенно разных уровнях вложенности есть один select и один input type=text. Необходимо помещать выбор селекта в текстовое поле, функция change.

При этом помещать в input надо не value селекта, а название варианта, т.е.
<option value="1">ВОТ-ЭТОТ-ТЕКСТ</option>

html каркас имеет следующий вид:

<div class="inside cmb-td cmb-nested cmb-field-list">
    <div class="cmb-row cmb-type-select cmb2-id-title-1-0-title cmb-repeat-group-field" data-fieldtype="select">
        <div class="cmb-th">
            <label for="title_1_0_title">TITLE</label>
        </div>
        <div class="cmb-td">
            <select class="cmb2_select" name="title_1[0][title]" id="title_1_0_title">  <option value="" selected="selected">Нет</option>
                <option value="57">Вторая статья</option>
                <option value="38">Тестовая статья</option>
            </select>
        </div>
    </div>
    <div class="cmb-row cmb-type-text cmb2-id-title-1-0-text-title cmb-repeat-group-field table-layout" data-fieldtype="text">
        <div class="cmb-th">
            <label for="title_1_0_text_title">Entry Title</label>
        </div>
        <div class="cmb-td">
            <input class="regular-text" name="title_1[0][text_title]" id="title_1_0_text_title" value="" type="text">
        </div>
    </div>
    <div class="cmb-row cmb-remove-field-row">
        <div class="cmb-remove-row">
            <a class="button-secondary cmb-shift-rows move-up alignleft" href="#"><span class="dashicons dashicons-arrow-up-alt2"></span></a> <a class="button-secondary cmb-shift-rows move-down alignleft" href="#"><span class="dashicons dashicons-arrow-down-alt2"></span></a><button type="button" data-selector="title_1_repeat" class="cmb-remove-group-row cmb-remove-group-row-button alignright button-secondary">Удалить Запись</button>
        </div>
    </div>

</div>

Думаю, надо зацепиться за класс inside у блока-обёртки, а дальше уже использовать select и input без классов и id

2 ответа 2

2

$(document).on('change', '.cmb2_select', function() {
  const $this = $(this),
    $input = $this.closest('.inside').find('.regular-text');

  $input.val($this.val() !== '' ? $this.find(':selected').text() : '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inside cmb-td cmb-nested cmb-field-list">
    <div class="cmb-row cmb-type-select cmb2-id-title-1-0-title cmb-repeat-group-field" data-fieldtype="select">
        <div class="cmb-th">
            <label for="title_1_0_title">TITLE</label>
        </div>
        <div class="cmb-td">
            <select class="cmb2_select" name="title_1[0][title]" id="title_1_0_title">  <option value="" selected="selected">Нет</option>
                <option value="57">Вторая статья</option>
                <option value="38">Тестовая статья</option>
            </select>
        </div>
    </div>
    <div class="cmb-row cmb-type-text cmb2-id-title-1-0-text-title cmb-repeat-group-field table-layout" data-fieldtype="text">
        <div class="cmb-th">
            <label for="title_1_0_text_title">Entry Title</label>
        </div>
        <div class="cmb-td">
            <input class="regular-text" name="title_1[0][text_title]" id="title_1_0_text_title" value="" type="text">
        </div>
    </div>
    <div class="cmb-row cmb-remove-field-row">
        <div class="cmb-remove-row">
            <a class="button-secondary cmb-shift-rows move-up alignleft" href="#"><span class="dashicons dashicons-arrow-up-alt2"></span></a> <a class="button-secondary cmb-shift-rows move-down alignleft" href="#"><span class="dashicons dashicons-arrow-down-alt2"></span></a><button type="button" data-selector="title_1_repeat" class="cmb-remove-group-row cmb-remove-group-row-button alignright button-secondary">Удалить Запись</button>
        </div>
    </div>

</div>
<div class="inside cmb-td cmb-nested cmb-field-list">
    <div class="cmb-row cmb-type-select cmb2-id-title-1-0-title cmb-repeat-group-field" data-fieldtype="select">
        <div class="cmb-th">
            <label for="title_1_0_title">TITLE</label>
        </div>
        <div class="cmb-td">
            <select class="cmb2_select" name="title_1[0][title]" id="title_1_0_title">  <option value="" selected="selected">Нет</option>
                <option value="57">Вторая статья</option>
                <option value="38">Тестовая статья</option>
            </select>
        </div>
    </div>
    <div class="cmb-row cmb-type-text cmb2-id-title-1-0-text-title cmb-repeat-group-field table-layout" data-fieldtype="text">
        <div class="cmb-th">
            <label for="title_1_0_text_title">Entry Title</label>
        </div>
        <div class="cmb-td">
            <input class="regular-text" name="title_1[0][text_title]" id="title_1_0_text_title" value="" type="text">
        </div>
    </div>
    <div class="cmb-row cmb-remove-field-row">
        <div class="cmb-remove-row">
            <a class="button-secondary cmb-shift-rows move-up alignleft" href="#"><span class="dashicons dashicons-arrow-up-alt2"></span></a> <a class="button-secondary cmb-shift-rows move-down alignleft" href="#"><span class="dashicons dashicons-arrow-down-alt2"></span></a><button type="button" data-selector="title_1_repeat" class="cmb-remove-group-row cmb-remove-group-row-button alignright button-secondary">Удалить Запись</button>
        </div>
    </div>

</div>

7
  • Немного не то, таких блоков на странице может быть несколько, работать должно только в своём блоке .inside кажется надо как-то использовать this, но у меня не вышло, не могли бы вы модифицировать ваш вариант?
    – Aaron
    2 сен 2017 в 14:39
  • @Aaron, поправил 2 сен 2017 в 14:56
  • Спасибо большое. Тут небольшой косяк образовался в процессе использования. Дело в том, что исполняющий скрипт генерирует "пустой" select (первый вариант "выберите пункт") такого вида: <option value="">Нет</option> Можно как-то добавить условие, что если в value пусто, то в текстовое поле ничего не подставляется, а если там что-то было, то отчищается. Да даже просто можно просто очищать, если выбрать "пустой" пункт.
    – Aaron
    2 сен 2017 в 16:03
  • @Aaron, поправил 2 сен 2017 в 16:07
  • Спасибо, выручили. Ответ ваш отметил ) У меня вопрос ещё такой. Насколько я смог понять, скрипт, который множит этот блок ("добавить строки") - это jquery код, который просто вставляет ещё один такой же блок и так до бесконечности и точно также удаляет. Так вот, проблема в том, что этот скрипт отрабатывает только в первый раз, после "вставки" нового блока в DOM, скрипт его уже не видит. Не знаю как грамотно повесить на кнопку "добавки" функцию перезапуска скрипта или что сделать, чтобы он отрабатывал всегда. Кнопка лежит в блоке с классом cmb-add-row, сама кнопка это button
    – Aaron
    2 сен 2017 в 16:26
2

$('div').on('change', 'select', function (event) {
  var $select = $(event.target)
  $select.closest('div').find('input').val($select.find(':selected').text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select>
    <option value=0></option>
    <option value=1>Aaa</option>
    <option value=2>Bbb</option>
  </select>
  
  <input>
</div>

3
  • с моей вёрсткой (той что выше) скрипт не отработал почему-то. + надо учесть, что таких блоков на странице несколько будет, т.е. скрипт должен отрабатывать внутри каждого блока отдельно.
    – Aaron
    2 сен 2017 в 14:42
  • @Aaron, потому что я показал идею, а тебе надо было классы расставить.
    – Qwertiy
    2 сен 2017 в 14:55
  • понял, благодарю)
    – Aaron
    2 сен 2017 в 15:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.