JavaScriptドロップダウン機能リファクタリング

Question

私は3つのドロップダウンを持っていますが、どちらも独自のidを持っています。ドロップダウンの値を選択して、それらを区別したいからです。私のドロップダウンのための

HTMLは次のとおりです。

<div class="dropdown"> 
       <button class="btn btn-default dropdown-toggle" id="make" type="button" data-toggle="dropdown"> Subject 
        <span class="caret"></span> 
       </button> 

       <ul class="dropdown-menu" id="makein"> 
        <li>bmw</li> 
        <li>mercedes</li> 
        <li>mazda</li> 
        <li>ford</li> 
        <li>lada</li> 
        <li>audi</li> 
        <li>skoda</li> 
        <li>fiat</li> 
       </ul> 

      </div> 

      <div class="dropdown"> 
       <button class="btn btn-default dropdown-toggle" id="year" type="button" data-toggle="dropdown"> Year 
        <span class="caret"></span> 
       </button> 

       <ul class="dropdown-menu" id="yearin"> 
        <li>2016</li> 
        <li>2015</li> 
        <li>2014</li> 
        <li>2013</li> 
        <li>2012</li> 
        <li>2011</li> 
        <li>2010</li> 
        <li>2009</li> 
       </ul> 

      </div> 

      <div class="dropdown"> 
       <button class="btn btn-default dropdown-toggle" id="level" type="button" data-toggle="dropdown"> Level 
        <span class="caret"></span> 
       </button> 

       <ul class="dropdown-menu" id="levelin"> 
        <li>luxury</li> 
        <li>ordinary</li> 
       </ul> 

      </div> 

私は次のように自分のIDに基づいて、各セクションのドロップダウンリストの値を設定するために3つのJavaScriptの機能を持っています。

$(function() { 
     $("#makein li").click(function(){ 

      $("#make").html($(this).text()+' <span class="caret"></span>'); 

     }); 
    }); 

$(function() { 
     $("#yearin li").click(function(){ 

      $("#year").html($(this).text()+' <span class="caret"></span>'); 

     }); 
    }); 

$(function() { 
     $("#levelin li").click(function(){ 

      $("#level").html($(this).text()+' <span class="caret"></span>'); 

     }); 
    }); 

私は本当にドン3種類のJavaScript機能を持つアプローチが似ています。私はあなたがこれらの3つの機能を作る方法を知っているのだろうかと思っていました。

Answer 1

あなたはこれを行うことができます：

$(function() { 
 
    $("li").click(function() { 
 
     $(this).parent().siblings('button').first().html($(this).text() + ' <span class="caret"></span>'); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" id="make" type="button" data-toggle="dropdown"> Subject 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" id="makein"> 
 
    <li>bmw</li> 
 
    <li>mercedes</li> 
 
    <li>mazda</li> 
 
    <li>ford</li> 
 
    <li>lada</li> 
 
    <li>audi</li> 
 
    <li>skoda</li> 
 
    <li>fiat</li> 
 
    </ul> 
 
</div> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" id="year" type="button" data-toggle="dropdown"> Year 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" id="yearin"> 
 
    <li>2016</li> 
 
    <li>2015</li> 
 
    <li>2014</li> 
 
    <li>2013</li> 
 
    <li>2012</li> 
 
    <li>2011</li> 
 
    <li>2010</li> 
 
    <li>2009</li> 
 
    </ul> 
 
</div> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" id="level" type="button" data-toggle="dropdown"> Level 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" id="levelin"> 
 
    <li>luxury</li> 
 
    <li>ordinary</li> 
 
    </ul> 
 
</div>

Answer 2

このコードは動作するはずです：

$(function() { 
    $('.dropdown-menu li').click(function() { 
    $(this).closest('dropdown').find('button').html($(this).text()+' <span class="caret"></span>') 
    }) 
})