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 event并获取此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
});

Answer 2

定义和用法

data-*属性用于存储私有的自定义数据页面或应用程序。
data-*属性使我们能够嵌入自定义数据所有HTML元素的属性。
然后可以在页面的JavaScript中使用存储的（自定义）数据创建更具吸引力的用户体验（没有任何Ajax调用或服务器端数据库查询）。

数据 - * 属性由两部分组成：

属性名称不应包含任何大写字母，且前缀“data - ”后必须至少有一个字符属性值可以是任何字符串

注意：用户代理将完全忽略以“data-”为前缀的自定义属性

<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="#" data-langcode = "sp" class="langclass">Spanish</a></li>
            <li><a href="#" data-langcode = "en" class = "langclass">english</a></li>

        </ul>
    </div>

<强>的jQuery

$(".langclass").on("click",function(){
    var code = $(this).data("langcode");//call this code in your functin
     callabelfunction(code);
})

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

2 个答案: