HTML 选择显示值而不是文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21699172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML select shows value instead of text
提问by AP87
Is it possible in a html select, to display the value of the option instead of the text?
是否可以在html select, 中显示选项的值而不是文本？
It's gonna be used for displaying a long disription in the dropdown, but when selecting it should only be showing a short text/ the value of the option.
它将用于在下拉列表中显示一个长的 disription，但在选择它时应该只显示一个短文本/选项的值。
code:
代码：
<select>
<option value="1">This is a long long text, that explains option 1</option>
<option value="2">This is a long long text, that explains option 2</option>
</select>
Now the selected item, when you leave the dropdown/combobox/whatever, should only display '1'
现在选定的项目，当你离开下拉列表/组合框/任何东西时，应该只显示“1”
回答by Fernán García de Zú?iga
You can do it by using the label tag:
您可以使用 label 标签来做到这一点：
<option value="the_value" label="the text displayed">the hidden text</option>
回答by Jeffrey Neo
This is the solution.
这就是解决方案。
$("select option").each(function () {
$(this).attr("data-label", $(this).text());
});
$("select").on("focus", function () {
$(this).find("option").each(function () {
$(this).text($(this).attr("data-label"));
});
}).on("change mouseleave", function () {
$(this).focus();
$(this).find("option:selected").text($(this).val());
$(this).blur();
}).change();
回答by Myth
I think This may help you
我想这可能对你有帮助
<select id='cboSelect'>
<option value="1">This is a long long text, that explains option 1</option>
<option value="2">This is a long long text, that explains option 2</option>
</select>
Try this jquery
试试这个 jquery
$("#cboSelect").change(function(){
$("#cboSelect option:selected").text($("#cboSelect").val());
});
this will change the text of the selected option with its corresponding value
这将使用其相应的值更改所选选项的文本
Here is the fiddle Fiddle
这是小提琴 小提琴
回答by Jordi Martí Domínguez
I found a solution that might solve your problem:
我找到了一个可以解决您问题的解决方案：
HTML:
HTML：
<select id="countryCode">
<option data-text="his is a long long text, that explains option 1" value="1">This is a long long text, that explains option 1</option>
<option data-text="his is a long long text, that explains option 1" value="2">This is a long long text, that explains option 1</option>
</select>
jQuery:
jQuery：
$('#countryCode option:selected').html($('#countryCode option:selected').attr('value')); // already changed onload
$('#countryCode').on('change mouseleave', function(){
$('#countryCode option').each(function(){
$(this).html( $(this).attr('data-text') );
});
$('#countryCode option:selected').html( $('#countryCode option:selected').attr('value') );
$(this).blur();
});
$('#countryCode').on('focus', function(){
$('#countryCode option').each(function(){
$(this).html( $(this).attr('data-text') );
});
});
回答by Madara's Ghost
Just don't give a value:
只是不要给出一个值：
<select>
<option>Test</option>
</select>
Will submit Testwhen selected.
Test选中后提交。
Just place the values you put in valueas the text.
只需将您输入的值value作为文本放置。
You can't have it show the value in value=just like that.
你不能让它value=像那样显示价值。
