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

gblwokeq 于 2023-05-27 发布在 Java

关注(0)|答案(3)|浏览(120)

我想创建一个下拉列表，它应该显示值而不是文本。
但是，当我单击下拉列表时，该选项应该显示文本而不是值。
我在这里添加了一个示例，但它并没有像预期的那样工作：

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

这是一个例子的图片。

JavaScript

来源：https://stackoverflow.com/questions/45325411/display-value-in-select-tag-instead-of-text

3条答案

按热度按时间

ugmeyewa1#

试试这个

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

我已经创建了一个额外的选项，将显示无。现在，每当用户将改变任何选项，我会改变值和文本的第一个元素，这是不显示，然后设置第一个值被选中

赞(0）回复(0）举报 2023-05-27

vyswwuz22#

如果你使用的是bootstrap，我建议你使用下拉菜单，并在每个下拉菜单项上添加一个点击监听器来改变下拉菜单的文本。
这是一个示例代码，我使用过滤表和显示过滤器类型的图标，而不是值文本。

<div class="btn-group flex-fill" dir="ltr">
<input type="text" enterkeyhint="search" class="form-control form-control-sm" id="filter_title" autocomplete="off" onclick="$(this).val('')">
<button class="btn border dropdown-toggle p-1" data-toggle="dropdown">
    <span id="ifilter_title"></span>
</button>
<div class="dropdown-menu text-center">
    <a class="dropdown-item" onclick="$('#ifilter_title').text('1');"><span>One</span></a>
    <a class="dropdown-item" onclick="$('#ifilter_title').text('2');"><span>Two</span></a>
    <a class="dropdown-item" onclick="$('#ifilter_title').text('3');"><span>Three</span></a>
    <a class="dropdown-item" onclick="$('#ifilter_title').text('4');"><span>Four</span></a>
</div>

赞(0）回复(0）举报 2023-05-27

wsxa1bj13#

对于原生的select元素，这是不可能做到的，请尝试在选项<option value="1" label="1" selected>One</option>中添加label属性

赞(0）回复(0）举报 2023-05-27