Разные уровни вложенности в одном Div

277
04 сентября 2017, 10:56

Внутри одного блока (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

Answer 1

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

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

READ ALSO
Имитация длительного нажатия клавиши

Имитация длительного нажатия клавиши

Меня интересует Как медленно физически нажать на кнопку с помощью javascript на веб странице сайта?

332
Как добавить классы для объектов на canvas?

Как добавить классы для объектов на canvas?

Страница содержит svg и canvas, хочу передать svg в canvas, сохранив встроенную в svg анимацию, чтобы тоже срабатывала при наведении курсора, но уже...

278
Scroll в конец страницы при нажатии на &lt;button&gt;

Scroll в конец страницы при нажатии на <button>

Добрый Вечер! Интересует такой вопрос, существует ли JS функция которая при нажатии на клавишу button, делает скролл в конец страницы спустя 1 секунду?...

411