我想创建一个下拉列表，它应该显示值而不是文本。
但是，当我单击下拉菜单时，该选项应该显示文本而不是值。
我在这里添加了一个示例，但它没有按预期工作:
<!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>这是示例的图片。
最佳答案
试试这个
$(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>我创建了一个额外的选项，它将不显示。现在，每当用户更改任何选项时，我都会更改未显示的第一个元素的值和文本，然后设置要选择的第一个值
关于javascript - 在选择标签而不是文本中显示值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45325411/