javascript - 选择实时更改输入的保持值

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());
});

这个小脚本的作用是将 id 为 #pageInput 的输入值和 id 为 #pageTextarea 的文本区域更改为所选值从 #pageSelect 选择选项。

然后，我向 option 标记添加了另外两个属性:data-pagedescription 和 data-pagetitle。

目标是让 #pageInput 显示 data-pagetitle 和 #pageTextarea 显示 data-pagedescription >.

我怎样才能实现这个目标？

这是迄今为止我的进度的 JS Fiddle:http://jsfiddle.net/9wb75038/15/ (更新为包括 jQuery)

Answer 1

The goal is to get #pageInput to display data-pagetitle and #pageTextarea to display data-pagedescription.

您需要找到所选的选项元素，然后使用 jQuery 的内置 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>