ris*_*ide 3 jquery html-select
给出以下HTML:
<select id="addSelection">
<option value="Original Value">Original Value</option>
</select>
Run Code Online (Sandbox Code Playgroud)
我想点击按钮时更改选项标签的文本值.
假设按钮单击可以正确完成...如何使用jQuery更改选项标签的文本?
所以,例如......我希望选项标签更改为:
<option value="New Value">New Value</option>
Run Code Online (Sandbox Code Playgroud)
我已尝试使用该.val()功能的变体但尚未找到解决方案.
谢谢所有回复的人!
Ner*_* Jr 10
以下简化解决方案......
<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>
Run Code Online (Sandbox Code Playgroud)
像任何其他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');
});
Run Code Online (Sandbox Code Playgroud)
考虑以下文件.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>
Run Code Online (Sandbox Code Playgroud)
以下javascript代码用jquery来解决问题:
$('#btn').click(function(){
var $option = $('#addSelection option:contains("Original Value")');
$option.attr('value', 'New Value');
$option.html('New Value');
});
Run Code Online (Sandbox Code Playgroud)