如何多次使用自定義下拉菜單

Question

嗨，每個人都被困在這里整整一個星期，試圖解決這個問題並找出原因！ ，， 在此處輸入圖像描述

我已經創建了一個類似於select選項的自定義dropable，因為在select option字體中真棒圖標無法在其中工作，每次從表中進行選擇時，它們始終具有保存內容

HTML代碼：

<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>

這是我的JQuery代碼：

$('.dropdownSelectopt').hide();
$('.dropdownSelectopt li').each(function(){
    $(this).click(function(){
        value = $(this).html();
        cl = $(this).parents().find('.route').html(value);
        console.log(cl +'test');
    });
});
    $('.dropdownSelect').click(function(){
        $('.dropdownSelectopt').toggle();
});

Answer 1

馬比這會工作

$('.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();
});

Answer 2

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();
});

Answer 3

  $(".dropdown").each(function(){ var $getItem = $(".dropdownSelect .route", this); $("#dropdownSelectopt li", this).click( function(e){ var value = $(this).html(); $getItem.html(value); }); }); 

 a.selectRoute{ text-decoration : none; cursor : pointer; color : #000; } .route{ padding : 5px; } .dropdown ul.dropdown-menu li{ padding : 5px; } 

 <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> 

Answer 4

這個你想要的:)

 $(".dropdown").each(function(){ var $setSelected = $(".dropdownSelect .route", this); $(".dropdown-menu", this).on("click", "li", function(e){ var value = $(this).html(); $setSelected.html(value); }); }); 

 a.selectRoute{ text-decoration : none; cursor : pointer; color : #000; } .route{ padding : 5px; } .dropdown ul.dropdown-menu li{ padding : 5px; } 

 <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>