Question

是否可以在html select中显示选项的值而不是文本？

它将用于在下拉列表中显示长时间的删除，但在选择它时应该只显示一个短文本/选项的值。

代码：

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

现在所选项目，当你离开下拉列表/组合框/其他时，应该只显示'1'

Answer 1

您可以使用label标签：

<option value="the_value" label="the text displayed">the hidden text</option>

Answer 2

我认为这可以帮到你

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

试试这个jquery

$("#cboSelect").change(function(){    
   $("#cboSelect option:selected").text($("#cboSelect").val());
});

这将更改所选选项的文本及其对应的值

这是小提琴 Fiddle

Answer 3

我找到了可以解决您问题的解决方案：

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：

$('#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') ); 
    });
});

http://jsfiddle.net/9y43gh4x/

Answer 4

这是解决方案。

$("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();

Answer 5

只是不要给出一个值：

<select>
    <option>Test</option>
</select>

选中后会提交Test。

只需将您放在value中的值作为文本。

你不能在value=中显示它的价值。

Answer 6

 $('#countryCode').find('option:selected').text();

HTML select显示值而不是文本

6 个答案: