Question

我有以下示例 http://jsfiddle.net/ahmedcom/5qu20yu6/

它工作正常，现在怎么改变

<select>
    <option>orderby</option>
    <option id="select1">__1</option>
    <option id="select2">__2</option>
    <option id="select3">__3</option>
</select>

到

<div class="dropdown">
    <button type="button" class="catby btn btn-sm dropdown-toggle" data-toggle="dropdown">
        <i class="ion-android-apps"></i>order by<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" data-value="action" id="select1">__1</a></li>
        <li><a href="#" data-value="another action" id="select2">__2</a></li>
        <li><a href="#" data-value="something else here" id="select3">__3</a></li>
    </ul>
</div>

JavaScript中有哪些修改？

Answer 1

这实际上是你想要的。我在javascript中做了一些修改。

DEMO： http://jsfiddle.net/5qu20yu6/8/

<div class="btn-group">
  <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">Select a Items <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"data-value="action -1">Item- I</a></li>
    <li><a href="#" data-value="action -2">Item II</a></li>
    <li><a href="#" data-value="action-3">Item III</a></li>
  </ul>
  </div>
<p class="menu">Options:</p>

$(".dropdown-menu li a").click(function(){
  var selText = $(this).attr('data-value');
    $(this).parents('.btn-group').siblings('.menu').html(selText)
});

Answer 2

这可以帮助您入门。

$(document).ready(function(){
    $('.dropdown-menu li a').click(function() {
        var boxClass = '.'+$(this).attr("id");
        $(".box").not(boxClass).hide();
        $(boxClass).show();
    })
});

Answer 3

<%= builder.collection_select :city, @company.city_groups.map{ |city_groups|.each do |city| {city.id city.name} } || [], :id ,:name, {:include_blank=>'<option disabled=true selected=selected >Please Select</option>'.html_safe}, {:class=>"form-control", :id=>"" } %>

Answer 4

这里的主要修改是我们需要在＆＃39; .dropdown-menu li＆＃39; 上绑定点击事件。请检查我的链接：

$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
   var $target = $( event.currentTarget );             

   if($target.attr("id")=="select1"){
            $(".box").not(".select1").hide();
            $(".select1").show();
        }
        else if($target.attr("id")=="select2"){
            $(".box").not(".select2").hide();
            $(".select2").show();
        }
        else if($target.attr("id")=="select3"){
            $(".box").not(".select3").hide();
            $(".select3").show();
        }

        else{
            $(".box").hide();
        }
    return true;

});

http://jsfiddle.net/3m6fbgbq/

Answer 5

以下是JsFiddle Demo：

描述：在代码中添加此源文件：

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>

并使用此jQuery函数，它将选择单击的锚标记，然后通过等同类名来查找框div。然后展示它。

$(document).ready(function(){
  $(".dropdown-menu li a").on("click",function(){
    var iddiv =  $(this).attr("id") ;
    $(".box").hide();
    $("."+iddiv).show();
  });
});

如何根据jQuery中引导下拉列表的选择显示和隐藏div元素

5 个答案: