Question

给出以下HTML：

<select id="addSelection">

<option value="Original Value">Original Value</option>

</select>

当我点击按钮时，我想更改选项标签的文本值。

假设按钮点击可以正确完成...如何使用jQuery更改选项标签的文本？

所以，例如......我希望选项标签改为：

<option value="New Value">New Value</option>

我尝试使用.val()功能的变体但尚未找到解决方案。

感谢所有回复的人！

Answer 1

以下简化解决方案......

<html>
<head>
    <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
    <script type="text/javascript" >
    function domread() {
        $('#btn').click(function(){
            $('#originalValue').attr('value', 'New Value').html('New Value');
        });
    }
    </script>
</head>
<body onload="domread()">
<select id="addSelection">
  <option id="originalValue" value="Original Value">Original Value</option>
  <option value="Two Value">Value two</option>
  <option value="Three Value">Value three</option>
</select>
<br/>
<input id="btn" type="button" value="Changes"></input>
</body>
</hmtl>

Answer 2

像任何其他HTML一样对待该选项。 $option.attr('value')将为您提供value属性的内容，$option.text()或$option.html()将为您提供开始和结束标记之间的内容。

$('#mybutton').click(function(){
    var $option = $('#addSelect option:content("Original Value")');
    $option.attr('value', 'New Value');
    $option.text('New Value');
});

Answer 3

考虑以下文件。 HTML：

<html>
<head>
    <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
</head>
<body>
<select id="addSelection">
  <option value="Original Value">Original Value</option>
  <option value="Original Value">Value two</option>
</select>
<br/>
<input id="btn" type="button" value="Changes"></input>
</body>
</hmtl>

以下javascript代码用jquery来解决问题：

$('#btn').click(function(){
    var $option = $('#addSelection option:contains("Original Value")');
    $option.attr('value', 'New Value');
    $option.html('New Value');
});

Answer 4

您使用.val()

的方式正确

var option = $("#addSelection option");
option.val('New Value');
option.html('New Value');

Answer 5

$("option[value='New Value']").html("Another value");

Answer 6

更改选择选项：

$("#addSelection").find(":selected").text("foo");

$("#addSelection").find(":selected").attr("value", "foo");

$("#addSelection").find(":selected").html("foo");

要更改特定选项（不一定是所选选项）：

$("#addSelection option[value='Original Value']").text("foo");

$("#addSelection option[value='Original Value']").html("foo");

Answer 7

使用此选项仅更新所选文本

$('#dropdown option:selected').text('whatever');

使用此选项更新选择值

$('#dropdown option:selected').val('whatever');

在jQuery中修改选择框选项文本

7 个答案: