匹配使用jQuery将项目值与其描述匹配

Question

如何更改选择列表的值以匹配其描述符。 例如在页面加载，我想这样的：

<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

首先，你必须选择使用这个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做它，你应该选择所有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>