javascript - 根据字符位置居中元素

Question

我有像

这样的下拉选择元素

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

我想根据字符“-”位置将元素居中。我已经完成了将 id 分配给每个元素并移动该元素，该元素工作正常，但当我更改或添加我必须更改位置的元素时，它不是动态的。有没有办法根据字符“-”位置将元素居中？

预期结果:

       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/