转到基于ul li的选择框中的指定文本

时间:2015-01-19 16:01:34

标签: javascript jquery html css

我希望有选择框的功能,当使用选择框时,如果我们输入一些关键字并且该关键字碰巧匹配在该选择框中,指针移动到指定的文本,我想实现类似的功能这里,以下是我的HTML

<a href="#" id="submit"> Get Value</a>
<ul>
    <li class="init">SELECT</li>
    <li data-value="value 1">1</li>
    <li data-value="value 2">2</li>
    <li data-value="value 3">3</li>
</ul>

以下是我的JS

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
});


$("#submit").click(function() {
    alert("The selected Value is "+ $("ul").find(".selected").data("value"));
});

以下是我的CSS

ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

小提琴

http://jsfiddle.net/Starx/a6NJk/2/

1 个答案:

答案 0 :(得分:0)

查看chosenselectize之类的内容。下载他们的文件并将其添加到您的网站。如果您选择Chosen,则可以通过将.chosen-select添加到表单元素来初始化插件:

<select class="chosen-select">
  <option>Hello</option>
  <option>Whats Up</option>
  <option>How Are You</option>
  <option>Nice to See You</option>
  <option>Goodbye</option>
</select>

EXAMPLE