Как я могу использовать раскрывающийся список настроек несколько раз

Question

привет всем ive застрял здесь целую неделю, пытаясь решить эту проблему и понять ее ПОЧЕМУ! ?? ,, enter image description here

Ive создали пользовательскую Выбрасывается, который аналогичен для выбора опции, причина в выберите вариант шрифта удивительные иконки не работают в нем,, каждый раз, когда я выбираю из таблицы, они всегда имеют сохранить содержание

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

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

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>