receiving option selected option button

Question

receiving option selected option button

Navigation

#1 by (0 votes)

0

I'm having trouble making this option work, I would like it when the user selects the city to list exactly how it is done with the name and year, can someone 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>

javascript html

asked by anonymous 22.12.2017 / 14:24

1 answer

Tags? and ? interpreted as html comment Inner Join returning empty

score 0 · Accepted Answer

Here's 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><scriptsrc="//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>