Выберите значения удержания для входов для реального изменения

Question

У меня есть следующий HTML-код:

<select id="pageSelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

<input type="text" id="pageInput" /> 
<textarea id="pageTextarea"></textarea>    

И после некоторых исследований Google и SO мне удалось создать следующий скрипт:

$('#pageSelect').change(function(){
  $('#pageInput').val($(this).val());
  $('#pageTextarea').val($(this).val());
});

Что это за маленький скриптделает, это изменить значение ввода с идентификатором #pageInput и текстовой области с идентификатором #pageTextarea на значение выбранного параметра из #pageSelect выбора.

Затем я добавил еще дваатрибуты тега option, data-pagedescription и data-pagetitle.

Цель состоит в том, чтобы #pageInput отображал data-pagetitle и #pageTextarea отображал data-pagedescription.

Как мне этого добиться?

Вот JS Fiddle с моими успехами: http://jsfiddle.net/9wb75038/15/ (обновлено, чтобы включить jQuery)

Answer 1

Другой способ лучше понять это - объявить значения end, а затем использовать функцию val () для записи значения.

$('#pageSelect').change(function(){
   var opt = $(this).find('option:selected').attr('data-pagedescription'); // get the option value from attribute
   var opt2 = $(this).find('option:selected').attr('data-pagetitle');
   $('#pageInput').val(opt);
   $('#pageTextarea').val(opt2);
});

Результат такой же, как вы ожидаете. Надеюсь, это поможет.

Answer 2

Цель состоит в том, чтобы получить #pageInput для отображения data-pagetitle и #pageTextarea для отображения data-pagedescription.

Вам необходимо найти выбранный элемент option, а затем использовать встроенный jQuery *Функция 1005 * data для получения соответствующего значения.

$('#pageSelect').change(function() {
    var selectedOption = $(this).find(':selected');
    $('#pageInput').val(selectedOption.data("pagetitle"));
    $('#pageTextarea').val(selectedOption.data("pagedescription"));
});

select, input, textarea
{
    display:block;  
    margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="pageSelect">
    <option value="1" data-pagedescription="test description 1" data-pagetitle="test title 1">Option 1</option>
    <option value="2" data-pagedescription="test description 2" data-pagetitle="test title 2">Option 2</option>
    <option value="3" data-pagedescription="test description 3" data-pagetitle="test title 3">Option 3</option>
</select>

<!-- pageInput should get its data from data-pagetitle -->
<input type="text" id="pageInput" /> 

<!-- pageTextarea should get its data from data-pagedescription -->
<textarea id="pageTextarea"></textarea>