arjwolf arjwolf - 3 months ago 11
HTML Question

JavaScript Dropdown Function Refactor

Hey guys I have 3 dropdown's, each one has its own

id
, I do this because I set the value of the dropdown to whichever I choose and I want to differentiate between them.

The html for my dropdowns is:

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


I have 3 JavaScript functions to set the value of the dropdown for each section based on their id as follows:

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

});
});


I really don't like the approach having the 3 different JavaScript functions. I was wondering if you guys know a way around making these 3 functions.

Answer

You could do this:

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

Comments