Question

我有下拉选择元素，如

USA - New York
India - Delhi
Canada - Ottawa
Finland - Helsinki
Luxembourg - Luxembourg

我想根据角色＆＃39; - ＆＃39;来对待元素。位置。我已经为每个元素分配了id，并且移动了工作正常的元素但是它不是动态的，因为我改变或添加了我必须改变位置的元素。有没有办法根据角色中心元素＆＃39; - ＆＃39;位置？

预期结果：

       USA - New York
     India - Delhi
    Canada - Ottawa
   Finland - Helsinki
Luxembourg - Luxembourg

http://plnkr.co/edit/Ys0urVnQlFASTudGOsdh?p=preview

Answer 1

您应该在标记内添加元素，但根据MDN，您只能在其中添加文本。您应该考虑使用其他类型的下拉列表：

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown
                <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                    <li role="presentation">
                        <a href="#"><div class="row">
                            <div class="col-xs-5 text-right">USA</div>
                            <div class="col-xs-1 text-center">-</div>
                            <div class="col-xs-5 text-left">New York</div>
                            </div></a>
                    </li>
                    <li role="presentation"><a href="#">
                        <div class="row">
                            <div class="col-xs-5 text-right">Delhi</div>
                            <div class="col-xs-1 text-center">-</div>
                            <div class="col-xs-5 text-left">India</div>
                        </div></a>
                    </li>
                    <li role="presentation"><a href="#">
                        <div class="row">
                            <div class="col-xs-5 text-right">Ottawa</div>
                            <div class="col-xs-1 text-center">-</div>
                            <div class="col-xs-5 text-left">Finland</div>
                        </div></a>
                    </li>
                    <li role="presentation"><a href="#">
                        <div class="row">
                            <div class="col-xs-5 text-right">Helsinki</div>
                            <div class="col-xs-1 text-center">-</div>
                            <div class="col-xs-5 text-left">Luxembourg</div>
                        </div></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-xs-6 output">

        </div>
    </div>
</div>

用一些JS来获取选定的值。看看http://jsfiddle.net/84kx2uub/

Answer 2

您可以尝试说明列表。它可以设计为水平显示类似于此。如果宽度需要为100％，您可能会探索另一种分离边的选项，而不是在之后提供“内容”。

<强> HTML

<dl>
    <dt>USA</dt>
    <dd>New York</dd>
    <dt>India</dt>
    <dd>Delhi</dd>
    <dt>Canada</dt>
    <dd>Ottawa</dd>
    <dt>Finland</dt>
    <dd>Helsinki</dd>
    <dt>Luxembourg</dt>
    <dd>Luxembourg</dd>
</dl>

<强> CSS

dd:after {
    clear: both;
}

dt, dd {
    width: 49%;
    float: left;
}

dt {
    text-align: right;
}

dt:after {
    content: " - ";
}

dd {
    margin-left: 5px;
}

基于角色位置的定心元素

2 个答案: