从下拉菜单选项中显示“标题”标签

Show "title" tag from drop-down menu option

本文关键字:标题 标签 显示 下拉菜单 选项      更新时间:2023-09-26
<form name="currency select" title="Currency Selector">
    <select name="currency" style="background: #2D3A47; no-repeat left center; cursor: pointer; width: 49px; height: 29px; onchange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
        <option value="" disabled="disabled" selected="selected" none="">$ € £</option> 
        <option value="/session/currency/usd/" title="US Dollar">USD</option>
        <option value="/session/currency/eur/" title="EURO">EUR</option>

我正在使用上面的代码。是否可以从下拉菜单中显示所选选项的title标签?现在,当我将鼠标悬停在下拉菜单中的某个选项上时,标题会弹出,但我还想在为该特定货币做出选择后在单独的文本区域中显示此标题。我该怎么做?

只需从所选选项中选择 attr 标题并用它填充文本区域即可。假设您的文本区域是带有 id 文本区域的div。您可以这样做:

$('div#text-area').text($('.select').attr('title'));

就是这样。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<form name="currency select" title="Currency Selector">
    <select name="currency" id="currencyList" value="GO">
        <option value="" disabled="disabled" selected="selected" none="">$ € £</option> 
        <option value="/session/currency/usd/" title="US Dollar">USD</option>
        <option value="/session/currency/eur/" title="EURO">EUR</option>
    </select>
    <textarea id="showTitle"></textarea>
</form>
</body>
<script>
$(document).ready(function()
{
    $(document).on('change','#currencyList',function()
    {
       var result = $("option:selected",this).attr('title');
       $("#showTitle").text(result);
    });
});
</script>