receiving option selected option option option button

Question

I’m struggling to make this option work, I’d like when the user selects the city to list exactly how it’s done with the name and year, someone can help me?

var options = {
  valueNames: [ 'name', 'born','city' ]
};

var userList = new List('users', options);

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">

  <input class="search" placeholder="Search" />
  	<select >
		<option> 	</option>
		<option value="">Roma</option>
		<option value="">London</option>
		</select>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
	   <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
	  <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
	  <p class="city">London</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
	   <p class="city">London</p>
    </li>
  </ul>

</div>

Answer 1

Follow an example using Jquery to add the filter to your select.

var options = {
  valueNames: [ 'name', 'born','city' ]
};

var userList = new List('users', options);

$(".cityFilter").on('change',function(){
  
  var filtro = $(this).val()
  
  if(filtro == "")
  {
    userList.filter();
  }
  else
  {
    userList.filter(function(item) {
      if (item.values().city == filtro) {
        return true;
      } 
      else
      {
        return false;
      }
    });
  } 
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">

  <input class="search" placeholder="Search" data-sort="name" />
  	<select class="cityFilter" data-sort="city" >
		<option> 	</option>
		<option value="Roma">Roma</option>
		<option value="London">London</option>
		</select>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
	   <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
	  <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
	  <p class="city">London</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
	   <p class="city">London</p>
    </li>
  </ul>

</div>