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 Selector $("option")选择所有选项，然后each()元素将其文本的值改为其值，使用：

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

以下是代码段演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

Answer 2

非常简单，您可以通过此行将值更改为内部文本：$(this).val($(this).text())。如果您想为每个option执行此操作，则应通过options选择所有$("option")并使用.each()方法对其进行迭代。这是一个例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

匹配使用jQuery选择项目值到其描述

2 个答案: