Display value in select tag instead of text

Question

I want to create a dropdown list, which should display value instead of text.

But, when I click the dropdown, the option should display the text instead of value.

I have added an example here, but it is not working as expected:

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

This is a picture of the example.

It should be mousedown, not click, but there's no way you'll have "1" and "one" at the same time with the standard widget. You need to write your own widget or hide part of the standard one (for example with a div) — Denys Séguret, Jul 26 '17 at 11:22
It isn't possible to create something as per your picture using a native `` and is used as the name of the field when submitting the form to the server. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option — ADyson, Jul 26 '17 at 11:23
@DenysSéguret i used the click event because i make this website for mobile and desktop too. but, thank you for your answer. — Raffel, Jul 26 '17 at 11:29

Sourabh Somani · Answer 1 · 2017-07-26T11:50:40.447

3

Try this

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

I have created an extra option which will be display none. Now whenever user will change any option I will change the value and text of the 1st element which is not displaying and Then setting the first value to be selected

edited Jul 26 '17 at 11:50

answered Jul 26 '17 at 11:38

Sourabh Somani

2,138
1
13
27

Thank you for your answer, but when I clicked the box it doesn't select the current option – Raffel Jul 26 '17 at 11:43
Yeah because If I will select that value then above value will be change – Sourabh Somani Jul 26 '17 at 11:46
You can create custom drop down using UL and LI and show whatever you want to do – Sourabh Somani Jul 26 '17 at 11:46
I think you should create custom – Sourabh Somani Jul 26 '17 at 11:47
Well Now try again – Sourabh Somani Jul 26 '17 at 11:50
Change Your color accordingly – Sourabh Somani Jul 26 '17 at 11:52
Thank you for your updates.. but sorry, it doesn't work well on mobile. – Raffel Jul 26 '17 at 12:06
Then only one option create custom using UL and LI – Sourabh Somani Jul 26 '17 at 12:09

score 0 · Answer 2 · answered May 25 '23 at 05:21

If you are using bootstrap, I suggest using dropdown-menu and add a click listener on each dropdown item to change the dropdown-menu text.

this is a sample code I use for filtering table and show icon of filter type instead of value text.

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

score 0 · Answer 3 · answered May 25 '23 at 06:00

0

It's impossible to do for a native select element, try adding label property in your option, <option value="1" label="1" selected>One</option>

answered May 25 '23 at 06:00

Display value in select tag instead of text

3 Answers3