在选择标签中显示值而不是文本

Question

我想创建一个下拉列表，它应该显示值而不是文本。

但是，当我单击下拉菜单时，该选项应显示文本而不是值。

我在这里添加了一个示例，但它没有按预期工作：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <select> <option name="One" value="1">One</option> <option name="Two" value="2">Two</option> <option name="Three" value="3">Three</option> <option name="Four" value="4">Four</option> </select> <script> $(document).ready(function() { $('select').click(function() { $('select :selected').text($('select :selected').val()); }); }); </script> </body> </html>

这是示例的图片。

Answer 1

试试这个

 $(document).ready(function() { $("select option[value="+$('select option:selected').val()+"]").css({"background-color":"#0000ff","color":"#fff"}); $('select').change(function() { $('select option')[0].value=$('select option:selected').val(); $('select option')[0].innerHTML=$('select option:selected').val(); $("select").val($('select option:selected').val()); $("select option").css({"background-color":"","color":""}); $("select option[value="+$('select option:selected').val()+"]").css({"background-color":"#0000ff","color":"#fff"}); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option name="One" value="1" style="display:none">1</option> <option name="One" value="1">One</option> <option name="Two" value="2">Two</option> <option name="Three" value="3">Three</option> <option name="Four" value="4">Four</option> </select>

我创建了一个额外的选项，它将不会显示。 现在，每当用户更改任何选项时，我将更改未显示的第一个元素的值和文本，然后设置要选择的第一个值

Answer 2

我不知道它的帮助，但如果你对此感到满意，你可以使用....

绑定文本字段和值字段中的值，并在获取文本时，您可以将值与旧值匹配。

<select>
  <option name="One" value="1">1</option>
  <option name="Two" value="2">2</option>
  <option name="Three" value="3">3</option>
  <option name="Four" value="4">4</option>
 </select>

对不起，如果它不值得你....

在选择标签中显示值而不是文本

问题描述

1 个解决方案

解决方案1
3 2017-07-26 11:38:05

解决方案2
0

在选择标签中显示值而不是文本

问题描述

1 个解决方案

解决方案1 3 2017-07-26 11:38:05

解决方案2 0

解决方案1
3 2017-07-26 11:38:05

解决方案2
0