html - 设计具有不同值属性和显示文本的下拉列表

Question

我正在开发一个使用 Google Translator API 的翻译系统。所以我需要一个语言下拉列表，我必须在其中将语言代码传递给 API。我尝试使用 bootstrap 来做到这一点，但它没有用。我知道如何在 HTML 中完成这部分。但我更喜欢在 Bootstrap 中这样做。这是我到目前为止尝试过的

<div class="btn-group"> <a class="btn btn-default dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#" >Spanish</a></li>
            <li><a href="#">Sinhala</a></li>
            <li><a href="#">Portuguese</a></li>
            <li class="divider">Arabic</li>
            <li><a href="#">Quebec</a>
            </li><li><a href="#">Ontario</a>
            </li><li><a href="#">British </a>
            </li>
        </ul>
    </div>

请给我一个继续的想法。提前谢谢你

Answer 1

将 data-* 属性添加到您的 a 标签。附加一个 click 事件 并获取此 data-* 属性并将其传递给 API。

例如:

<div class="btn-group"> 
   <a class="btn btn-default dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region <span class="caret"></span>
   </a>
   <ul class="dropdown-menu">
       <li><a data-code="spanishCode" href="#" >Spanish</a></li>
       <li><a data-code="sinhalaCode" href="#">Sinhala</a></li>
       <li><a data-code="portugueseCode" href="#">Portuguese</a></li>
       <li class="divider">Arabic</li>
       <li><a data-code="quebecCode" href="#">Quebec</a></li>
       <li><a data-code="ontarioCode" href="#">Ontario</a></li>
       <li><a data-code="britishCode" href="#">British </a></li>
   </ul>
</div>

点击事件

$('ul.dropdown-menu li a').on('click',function(){
     var code=$(this).data('code');
     //pass this code in your API request and get the response
});