将 Select 项值与其描述匹配 jQuery

Question

如何更改 select 列表的值以匹配它们的描述符。例如在页面加载时我想要这样：

<select>
<option value="1">Turkey</option>
<option value="1">Chicken</option>
<option value="1">Duck</option>
</select>

变成这样：

<select>
<option value="Turkey">Turkey</option>
<option value="Chicken">Chicken</option>
<option value="Duck">Duck</option>
</select>

解决方案应适用于动态文本。

Answer 1

首先你必须 select 使用这个 jQuery 选择器 $("option") 的所有选项，然后对于 each() 元素影响它的文本到它的值，使用这个：

$(this).val($(this).text());

这是一个代码片段演示：

$("button").on("click",function(){
$("option").each(function(){

$(this).val($(this).text());
console.log($(this).val());

});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">Turkey</option>
<option value="1">Chicken</option>
<option value="1">Duck</option>
</select>
<button type="button">Match</button>

如果您想在不按下按钮的情况下执行此操作，请使用以下脚本：

$("option").each(function(){
  $(this).val($(this).text());
});

Answer 2

很简单，您可以通过以下行将值更改为内部文本：$(this).val($(this).text())。如果你想对每个 option 都这样做，你应该 select 所有 options 通过 $("option") 并使用 .each() 方法遍历它们。这是示例：

$("option").each(function() {
  $(this).val($(this).text())
  console.log($(this).val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">Turkey</option>
<option value="1">Chicken</option>
<option value="1">Duck</option>
</select>

将 Select 项值与其描述匹配 jQuery

Match Select items values to their Descriptions with jQuery

jquery

html-select