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

我想创建一个下拉列表，它应该显示值而不是文本。在选择标记而不是文本中显示值

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

我已经在这里添加了一个例子，但预期它不工作：

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

这是示例的图片。

来源

2017-07-26 Raffel

它应该是'$（this）.find（'option：selected'）。val（）' – ThisGuyHasTwoThumbs

它应该是mousedown，而不是点击，但是没有办法在标准小部件的同时使用“1”和“one”。您需要编写自己的窗口小部件或隐藏标准窗口的一部分（例如使用div） –

根据您的图片使用本地“'，在将表单提交给服务器时用作该字段的名称。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option – ADyson

试试这个

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

我创建这将是显示无多了一种选择。现在，无论何时用户将更改任何选项，我将更改第一个元素的值和文本不显示，然后设置要选择的第一个值

来源

2017-07-26 11:38:05

谢谢你的回答，但是当我点击盒子它不选择当前选项 – Raffel

是啊，因为如果我将选择值，则输入的值将被改变 –

可以创建自定义下拉使用UL和李和表演什么你想要做 –

我不知道它的帮助完整，但如果你确定这个你可以使用....

在这两个文本字段和值字段中的值绑定，并同时获得文本可以匹配旧的价值..

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

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

来源

2017-07-27 10:50:08

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

回答

相关问题