Question

所以我想为每个人显示一些文字，比如我有这个：

<select id="321" name="123">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
</select>
<div id="help"></div>

如何使a选项显示“A是字母表中的第一个字母！”在jquery的帮助div？其余的类似。

Answer 1

您实际上必须将文本的值存储在某处。您可以创建一个函数来获取数字计数的英文拼写并动态构建它，但我不认为这样的东西已经存在。无论如何，如果你愿意输入一点：

<select ...>
   <option data-description="A is the first letter of the alphabet!">a</option>
   ...


$("#321").on('change', function () {
   $("#help").text($(this).find(':selected').data('description'));
});

Answer 2

您需要使用data属性来存储文本，除非您知道插件具有某种AI且知道它的字母并且可以返回字符串。

<select id="321" name="123">
    <option value="a" data-message="A is the first letter of the alphabet!">a</option>
    <option value="b" data-message="B is the second letter of the alphabet!">b</option>
    <option value="c" data-message="C is the third letter of the alphabet!">c</option>
    <option value="d" data-message="D is the fourth letter of the alphabet!">d</option>
</select>
<div id="help"></div>

$('#321').change(function() {
    $('#help').text($('option:selected', this).data('message'));
});

Answer 3

这是此问题的另一种解决方案：

<select id="321" name="123">
    <option id='a' value="a">a</option>
    <option id='b' value="b">b</option>
    <option id='c' value="c">c</option>
    <option id='d' value="d">d</option>
</select>
<div id="help"></div>
<script>
    $(document).ready(function (){
        var alghabet = new Array('first','second','third','fourth');
        $("option").hover(
        function() {
            var i = $(this).index();
            var value = $(this).attr("value").toUpperCase();
            $("#help").html(value + " is the " + alghabet[i] + " letter of the alphabet!");
        }
    );
    });
</script>

使用<select>选项</select>显示帮助文本

3 个答案: