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小提琴：http://jsfiddle.net/9wb75038/15/（已更新为包括jQuery）

Answer 1

目标是使#pageInput显示数据页面标题，并使#pageTextarea显示数据页面描述。

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

Answer 2

让您更好地理解的另一种方法是，声明结束值，然后使用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);
});

结果与您期望的相同。希望对您有所帮助。

选择保持值作为实时更改的输入

2 个答案: