我如何多次使用自定义下拉列表

时间：2016-03-16 05:06:02

标签： javascript jquery html css

大家好，我已经被困在这里一整个星期试图解决这个并弄清楚为什么！ ,,, enter image description here

enter image description here

我已经创建了一个类似于select选项的自定义dropable，因为选择选项字体中的awesome图标不起作用，每次我从表中选择它们总是有保存内容

HTML code：

    index :title => "Office Expenses" do
    selectable_column
    column "Staff Salary", :offstfsal
    column "Visa & Medical", :offstvimed
    column "Total" do |total|
        :offstfsal.to_i + :offstvimed.to_i
    end

这是我的JQuery代码：

<td class=""><div class="pull-right dropdownSelecticon"><i class=" fa fa-caret-down"></i></div>
  <div class="form-control dropdownSelect">
    <div class="route">Select Route</div>
    <ul class="dropdownSelectopt">
      <li><span><i class="fa fa-forward"></i> Forward to tenant contacts</span></li>
      <li><span><i class="fa fa-file"></i> Do task note</span></li>
      <li><span><i class="fa fa-paper-plane-o"></i> Ask/send a message</span></li>
      <li><span><i class="fa fa-envelope-o"></i> Send to voicemail</span></li>
      <li><span><i class="fa fa-ban"></i> Block</span></li>
    </ul>
  </div></td>
<td class=""><div class="pull-right dropdownSelecticon"><i class=" fa fa-caret-down"></i></div>
  <div class="form-control dropdownSelect">
    <div class="route">Select Route</div>
    <ul class="dropdownSelectopt">
      <li><span><i class="fa fa-forward"></i> Forward to tenant contacts</span></li>
      <li><span><i class="fa fa-file"></i> Do task note</span></li>
      <li><span><i class="fa fa-paper-plane-o"></i> Ask/send a message</span></li>
      <li><span><i class="fa fa-envelope-o"></i> Send to voicemail</span></li>
      <li><span><i class="fa fa-ban"></i> Block</span></li>
    </ul>
  </div></td>

4 个答案:

答案 0 :(得分：0)

Maby这将起作用

$('.dropdownSelectopt').hide();
$('.dropdownSelectopt li').click(function(){//no need for loop
        value = $(this).html();
        cl = $(this).closest().find('.route');//select the tr find the route div
        c1.html(value);
        console.log(cl +'test');
    });

    $('.dropdownSelect').click(function(){
        $('.dropdownSelectopt').toggle();
});

答案 1 :(得分：0)

Try Following    
$('.dropdownSelectopt').hide();
$('.dropdownSelectopt li').click(function(){
        value = $(this).html();
        element = $(this).closest().find('.route');
        element.html(value);
        console.log(element.html());
    });

    $('.dropdownSelect').click(function(){
        $('.dropdownSelectopt').toggle();
});

答案 2 :(得分：0)

＆＃13;
＆＃13; 
    $(".dropdown").each(function(){
  var $getItem = $(".dropdownSelect .route", this);
  $("#dropdownSelectopt li", this).click( function(e){
    var value = $(this).html();
    $getItem.html(value);
  });
});
＆＃13; 
a.selectRoute{
  text-decoration : none;
  cursor : pointer;
  color : #000;
}
.route{
  padding : 5px;
}

.dropdown ul.dropdown-menu li{
  padding : 5px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<table class="table table-striped"> 
  <tbody> 
    <tr> 
      <th scope="row"><a href="#"><span class="fa fa-trash"></span></a></th>
      <td><img data-src="holder.js/140x140" class="img-circle" alt="50X50" src="http://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-maxcdn.png" data-holder-rendered="true" style="width: 20px; height: 20px;"></td>
      <td style="width:30%;">
        <div class="dropdown">
          <a class="dropdown-toggle selectRoute" type="button" data-toggle="dropdown">
            <div class="dropdownSelect"><span class="route">Select Route</span><span class="caret"></span></div>
          </a>
          <ul class="dropdown-menu " id="dropdownSelectopt">
            <li data-value="FTC"><span><i class="fa fa-forward"></i> Forward to tenant contacts</span></li>
            <li data-value="DTN"><span><i class="fa fa-file"></i> Do task note</span></li>
            <li><span><i class="fa fa-paper-plane-o"></i> Ask/send a message</span></li>
            <li><span><i class="fa fa-envelope-o"></i> Send to voicemail</span></li>                            
            <li><span><i class="fa fa-ban"></i> Block</span></li>
          </ul>
        </div>
      </td>
      <td><input type="text" class="form-control" id="somtext" placeholder="Additional Text"></td> 
    </tr>
    <tr> 
      <th scope="row"><a href="#"><span class="fa fa-trash"></span></a></th>
      <td><img data-src="holder.js/140x140" class="img-circle" alt="50X50" src="http://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-maxcdn.png" data-holder-rendered="true" style="width: 20px; height: 20px;"></td>
      <td style="width:30%;">
        <div class="dropdown">
          <a class="dropdown-toggle selectRoute" type="button" data-toggle="dropdown">
            <div class="dropdownSelect"><span class="route">Select Route</span><span class="caret"></span></div>
          </a>
          <ul class="dropdown-menu " id="dropdownSelectopt">
            <li data-value="FTC"><span><i class="fa fa-forward"></i> Forward to tenant contacts</span></li>
            <li data-value="DTN"><span><i class="fa fa-file"></i> Do task note</span></li>
            <li><span><i class="fa fa-paper-plane-o"></i> Ask/send a message</span></li>
            <li><span><i class="fa fa-envelope-o"></i> Send to voicemail</span></li>                            
            <li><span><i class="fa fa-ban"></i> Block</span></li>
          </ul>
        </div>
      </td>
      <td><input type="text" class="form-control" id="somtext" placeholder="Additional Text"></td> 
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

这是你想要的:)）

＆＃13;
＆＃13; 
$(".dropdown").each(function(){
  var $setSelected = $(".dropdownSelect .route", this);

  $(".dropdown-menu", this).on("click", "li", function(e){
    var value = $(this).html();
    $setSelected.html(value);
  });
});
＆＃13; 
a.selectRoute{
  text-decoration : none;
  cursor : pointer;
  color : #000;
}
.route{
  padding : 5px;
}

.dropdown ul.dropdown-menu li{
  padding : 5px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<table class="table table-striped"> 
  <tbody> 
    <tr> 
      <th scope="row"><a href="#"><span class="fa fa-trash"></span></a></th>
      <td>
        <img data-src="holder.js/140x140" class="img-circle" alt="50X50" src="http://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-maxcdn.png" data-holder-rendered="true" style="width: 20px; height: 20px;">
      </td>
      <td style="width:30%;">
        <div class="dropdown">
          <a class="dropdown-toggle selectRoute" type="button" data-toggle="dropdown">
            <div class="dropdownSelect"><span class="route">Select Route</span><span class="caret"></span></div>
          </a>
          <ul class="dropdown-menu">
            <li data-value="FTC"><span><i class="fa fa-forward"></i> Forward to tenant contacts</span></li>
            <li data-value="DTN"><span><i class="fa fa-file"></i> Do task note</span></li>
            <li><span><i class="fa fa-paper-plane-o"></i> Ask/send a message</span></li>
            <li><span><i class="fa fa-envelope-o"></i> Send to voicemail</span></li>
            <li><span><i class="fa fa-ban"></i> Block</span></li>
          </ul>
        </div>        
      </td>
      <td>
        <input type="text" class="form-control" id="somtext" placeholder="Additional Text">
      </td> 
    </tr>
    <tr> 
      <th scope="row"><a href="#"><span class="fa fa-trash"></span></a></th>
      <td>
        <img data-src="holder.js/140x140" class="img-circle" alt="50X50" src="http://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-maxcdn.png" data-holder-rendered="true" style="width: 20px; height: 20px;">
      </td>
      <td style="width:30%;">
        <div class="dropdown">
          <a class="dropdown-toggle selectRoute" type="button" data-toggle="dropdown">
            <div class="dropdownSelect"><span class="route">Select Route</span><span class="caret"></span></div>
          </a>
          <ul class="dropdown-menu">
            <li data-value="FTC"><span><i class="fa fa-forward"></i> Forward to tenant contacts</span></li>
            <li data-value="DTN"><span><i class="fa fa-file"></i> Do task note</span></li>
            <li><span><i class="fa fa-paper-plane-o"></i> Ask/send a message</span></li>
            <li><span><i class="fa fa-envelope-o"></i> Send to voicemail</span></li>
            <li><span><i class="fa fa-ban"></i> Block</span></li>
          </ul>
        </div>        
      </td>
      <td>
        <input type="text" class="form-control" id="somtext" placeholder="Additional Text">
      </td> 
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题