Difference between revisions of "Team:Jilin China/Part/Search Engine"

Line 82: Line 82:
 
     <div>
 
     <div>
 
       <h2>Title</h2>
 
       <h2>Title</h2>
 +
<form>
 +
<p>Temperature</p>
 +
<select id="attr1" name="library">
 +
<option value="v1-0">Temperature</option>
 +
        <option value="v1-1">34-</option>
 +
        <option value="v1-2">35</option>
 +
<option value="v1-3">36</option>
 +
<option value="v1-4">37</option>
 +
<option value="v1-5">38~39</option>
 +
<option value="v1-6">40+</option>
 +
    </select>
 +
<p>Intensity</p>
 +
<select id="attr2" name="">
 +
<option value="v2-0">Intensity</option>
 +
        <option value="v2-1">1-5</option>
 +
        <option value="v2-2">5-10</option>
 +
<option value="v2-3">10-15</option>
 +
<option value="v2-4">15+</option>
 +
    </select>
 +
<p>Sensitivity</p>
 +
<select id="attr3" name="">
 +
<option value="default">Sensitivity</option>
 +
        <option value="v3-1">1&lt;</option>
 +
        <option value="v3-2">1&gt;</option>
 +
    </select>
 +
<input type="button" value="Look Up!" onClick="findItem()" />
 +
<input type="reset" value="Reset" />
 +
</form>
 +
<style>
 +
.datas .item{
 +
border:2px solid #C0C0C0;
 +
box-shadow: 0 0 3rem rgba(0,0,0,0.3);
 +
margin:1rem;
 +
height:18rem;
 +
width:24rem;
 +
display: none;
 +
}
 +
select{
 +
width:10rem;
 +
height:3rem;
 +
margin:1rem;
 +
}
 +
select:not(#attr1) option{
 +
display:none;
 +
}
 +
select option{
 +
height:3rem;
 +
}
 +
</style>
 +
<div class="datas">
 +
<div class="item v1-1 v2-1 v3-1"></div>
 +
<div class="item v1-1 v2-2"></div>
 +
<div class="item v1-1 v2-3"></div>
 +
<div class="item v1-1 v2-4"></div>
 +
<div class="item v1-2 v2-1"></div>
 +
<div class="item v1-2 v2-2"></div>
 +
<div class="item v1-2 v2-3"></div>
 +
<div class="item v1-3 v2-1"></div>
 +
</div>
 +
 +
 +
<script>
 +
$(document).ready(function(){
 +
var ca1,ca2,ca3;
 +
$("#attr1").change(function(){
 +
        $("select:not(#attr1) option").css("display","none");
 +
ca1 = $("#attr1 option:selected").val();
 +
$("."+ca1).each(function(){
 +
if($(this).hasClass("v2-1")){
 +
$("option[value=v2-1]").css("display","block");
 +
}else if($(this).hasClass("v2-2")){
 +
$("option[value=v2-2]").css("display","block");
 +
}else if($(this).hasClass("v2-3")){
 +
$("option[value=v2-3]").css("display","block");
 +
}else if($(this).hasClass("v2-4")){
 +
$("option[value=v2-4]").css("display","block");
 +
}
 +
});
 +
});
 +
$("#attr2").change(function(){
 +
        $("select.attr3 option").css("display","none");
 +
ca2 = $("#attr2 option:selected").val();
 +
$("."+ca2).each(function(){
 +
if($(this).hasClass("v3-1")){
 +
$("option[value=v3-1]").css("display","block");
 +
}else if($(this).hasClass("v3-2")){
 +
$("option[value=v3-2]").css("display","block");
 +
}
 +
});
 +
});
 +
$("#attr3").change(function(){
 +
ca3 = $("#attr3 option:selected").val();
 +
$(".datas > .item").each(function(){
 +
$(this).css("display","none");
 +
if($(this).hasClass(ca1) || $(this).hasClass("v1-0")){
 +
if($(this).hasClass(ca2) || $(this).hasClass("v2-0")){
 +
if($(this).hasClass(ca2) || $(this).hasClass("v2-0")){
 +
$(this).css("display","block");
 +
}
 +
}
 +
}
 +
});
 +
});
 +
});  
 +
function findItem(){
 +
var a1 =$("#attr1 option:selected").val();
 +
var a2 =$("#attr2 option:selected").val();
 +
var a3 =$("#attr3 option:selected").val();
 +
$(".datas > .item").each(function(){
 +
$(this).css("display","none");
 +
if ($(this).hasClass(a1) || $(this).hasClass("v1-0")) {
 +
if ($(this).hasClass(a2) || $(this).hasClass("v2-0")) {
 +
if ($(this).hasClass(a3) || $(this).hasClass("v3-0")) {
 +
$(this).css("display","block");}
 +
}
 +
}
 +
});
 +
}
 +
 +
</script>
 
     </div>
 
     </div>
 
     </li>
 
     </li>

Revision as of 07:50, 15 October 2018

SynRT
EXPLORER


Promoters

Toolkits Design

  • 余戎镇 正在编辑此页面

    更新时间 Oct,16,2018 3:47PM 目前缺乏测试样本，暂不上传

  • Title

  • Title

    Temperature

    Intensity

    Sensitivity