× Got a CSS, HTML or webdesign question? Ask it here!

Please help us about underscore-min.js

11 months 1 week ago #18390 by KOIKE
I'm sorry, I am in trouble.
When there are three search items (drop down list) and three are selected and the search button is clicked
I want to display things that apply to the selection.
However, it does not work with the following code.
I'm sorry, please help me.

<script type='text/javascript' src='/js/libs/underscore-min.js'></script>
<form id="search" name="search">
色を選択 <select id="color" name="color">
<option value="">ALL</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="green">GREEN</option>
</select>
形を選択 <select id="type" name="type">
<option value="">ALL</option><option value="square">SQUARE</option>
<option value="circle">CIRCLE</option>
</select> 人を選択
<select id="human" name="human">
<option value="">ALL</option>
<option value="yamada">YAMADA</option>
<option value="tanaka">TANAKA</option>
</select>
<input type="submit" value="Search" />
</form>
<div id="items">
<div class="item red square yamada">
赤い四角山田</div>
<div class="item red square tanaka">
赤い四角田中</div>
<div class="item red circle yamada">
赤い丸山田</div>
<div class="item red circle tanaka">
赤い丸田中</div>
<div class="item blue square yamada">
青い四角山田</div>
<div class="item blue square tanaka">
青い四角田中</div>
<div class="item blue circle yamada">
青い丸山田</div>
<div class="item blue circle tanaka">
青い丸田中</div>
<div class="item green square yamada">
緑の四角山田</div>
<div class="item green square tanaka">
緑の四角田中</div>
<div class="item green circle yamada">
緑の丸山田</div>
<div class="item green circle tanaka">
緑の丸田中</div>
</div>
<script type="text/javascript">
var items = [
{
"name" : "赤い四角山田",
"color" : "red",
"type" : "square",
"human" : "yamada"
},
{
"name" : "赤い四角田中",
"color" : "red",
"type" : "square",
"human" : "tanaka"
},
{
"name" : "赤い丸山田",
"color" : "red",
"type" : "circle",
"human" : "yamada"
},
"name" : "赤い丸田中",
"color" : "red",
"type" : "circle",
"human" : "tanaka"
},
{
"name" : "青い四角山田",
"color" : "blue",
"type" : "square",
"human" : "yamada"
},
{
"name" : "青い四角田中",
"color" : "blue",
"type" : "square",
"human" : "tanaka"
},
{
"name" : "青い丸山田",
"color" : "blue",
"type" : "circle",
"human" : "yamada"
},
{
"name" : "青い丸田中",
"color" : "blue",
"type" : "circle",
"human" : "tanaka"
},
{
"name" : "緑の四角山田",
"color" : "green",
"type" : "square",
"human" : "yamada"
},
{
"name" : "緑の四角田中",
"color" : "green",
"type" : "square",
"human" : "tanaka"
},
{
"name" : "緑の丸山田",
"color" : "green",
"type" : "circle",
"human" : "yamada"
}
{
"name" : "緑の丸田中",
"color" : "green",
"type" : "circle",
"human" : "tanaka"
}
];


$('#search').on('submit' , function(event){
event.preventDefault();


var query = {};
if($('#color').val() != ''){
query.color = $('#color').val();
}
if($('#type').val() != ''){
query.type = $('#type').val();
}
if($('#human').val() != ''){
query.human = $('#human').val();
}


var results = _.where(items, query);


outputResults(results);
});



function outputResults(results){

var html = '';


jQuery.each(results, function() {
html += '<div class="item ' + this.color + ' ' + this.type + '' + this.human + '">';
html += this.name;
html += '</div>';
});


$('#items').empty().append(html);
}



$(window).on('load', function(){
outputResults(items);
});
</script>

Please Log in or Create an account to join the conversation.

Time to create page: 0.107 seconds
Powered by Kunena Forum