更改按钮选择框代码更改

我有我的脚本工作，但目前它使用了按钮输入，我想将其更改为选择框输入，但我似乎无法得到的代码工作，请帮助更改按钮选择框代码更改

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 


<script type="text/javascript" src="jquery.js"></script>   
<script type="text/javascript"> 
$(function() { 
var fuel = ''; // Keep track of selections 
var drive = ''; 
var type = ''; 
$('#fuel button').click(function() { // Choose a fuel 
    fuel = (this.id ? '.' : '') + this.id; 
    selectModels(); 
}); 
$('#drive button').click(function() { // Choose a drive 
    drive = (this.id ? '.' : '') + this.id; 
    selectModels(); 
}); 
$('#type button').click(function() { // Choose a colour 
    type = (this.id ? '.' : '') + this.id; 
    selectModels(); 
}); 
function selectModels() { // Select matching models 
    $('div.modelContainer').hide(). // Hide all 
     filter((fuel + drive + type) || '*').show(); // Show matches 
} 
}); 
</script> 
</head> 
<body> 
<div id="fuel" class="controller"> 
<span class="controllerLabel">fuel:</span> 
<button>All</button> 
<button id="petrol">petrol</button> 
<button id="diesel">diesel</button> 
</div> 
<div id="drive" class="controller"> 
<span class="controllerLabel">drive:</span> 
<button>All</button> 
<button id="man">manual</button> 
<button id="auto">auto</button> 

</div> 
<div id="type" class="controller"> 
<span class="controllerLabel">type:</span> 
<button>All</button> 
<button id="car">car</button> 
<button id="4">4x4</button> 
<button id="7">people</button> 
<button id="van">van</button> 

</div> 



<div class="modelContainer petrol manual car"> 

pmc 

</div> 

<div class="modelContainer petrol manual 4"> 

pm4 

</div> 



<div class="modelContainer petrol auto car"> 

pac 

</div> 


<div class="modelContainer diesel manual car"> 

dmc 

</div> 



<div class="modelContainer diesel manual van"> 

dmv 

</div> 

<div class="modelContainer diesel auto car"> 

dac 

</div> 

<div class="modelContainer diesel auto 4"> 

da4 

</div> 

<div class="modelContainer diesel auto 7"> 

da7 

</div> 

<div class="modelContainer diesel auto 7 4"> 

sor 

</div> 
</body> 
</html>

，并更改“燃料”按钮

<div id="fuel" class="controller"> 
<span class="controllerLabel">fuel:</span> 
<select> 
<option value="all">all</option> 
<option value="petrol">petrol</option> 
<option value="diesel">diesel</option> 
</select> 
</div>

感谢

来源

2012-05-10 user1385301

一个'id'的值不应该是一个数。 – Sampson

有很多在这个问题上，需要加以改进，但是这应该给你立竿见影的效果：

$('#fuel select').on("change", function() { 
    fuel = (this.value ? '.' : '') + this.value; 
    selectModels(); 
});

您需要重复相同的其他select元素以及。

更新多带几个变化：

没有与此代码，可能导致你在未来的一段无奈的几个问题。我冒昧地重新写了一下。虽然可能还有一些改进空间，但我认为它会让你更容易处理和理解。

我首先将所有可过滤标准存储在单个对象中，而不是多个变量。这给了我们一个推动和拉动价值的地方。

var fType = { 'fuel' : 'all', 'drive' : 'all', 'type' : 'all' };

Next我正在创建一个小的正则表达式模式，它将在预定义的CSS选择器中查找关键字。函数partsMapper将负责将正则表达式发现的关键字与上面的fType对象中的实际值进行交换。

var partsRegex = /([a-z]+)/g; 

function partsMapper (s, p) { 
    return fType[p]; 
}

下，我已经分类的所有select元素融入到一个单一的<div class='controller'>，使我们可以更容易地从一个地方捕捉他们改变事件的所有。

$(".controller").on("change", "select", function(){

当select火灾的变化情况，从.controller内，我们在我们的fType对象更新为改变事件的值开始。所以如果#fuel已更改，我们将更新fType[fuel]为新值。

// Set new value 
    fType[ this.id ] = this.value;

与我们的fType对象刚刚更新，我们可以更新我们的项目列表。我们开始隐藏所有列表项目（是的，我也在这里重组）。接下来，我们只选择匹配.fuel.drive.type选择器的列表项，其中找到每个关键字，并用我们的正则表达式/函数组合与fType对象中的当前值进行替换。

因此，如果fType.fuel是"petrol"，那么我们的选择器将以.petrol开头。所有标准默认设置为"all"，所以一旦您将#fuel更改为petrol，我们的选择器将立即变为.petrol.all.all，其中显示所有.petrol项目。

// Update filtered items 
    $(".modelList li") 
    .hide() 
    .filter('.fuel.drive.type'.replace(partsRegex, partsMapper)) 
    .show();

最后，我们关闭了我们的$.on方法。

});

演示：http://jsbin.com/imezez/edit#javascript,html

来源

2012-05-10 13:24:32 Sampson

工程，非常感谢你，是的，我知道代码是有点messey，那下一个在我的待办事项列表中，只是想让它工作第一 – user1385301

@ user1385301我已经提供了这个答案的大规模更新，作为以及为您提供的新代码和功能演示。请在您方便时阅读，如果您有任何疑问，请告诉我。 – Sampson

非常感谢您的帮助！ – user1385301

更改按钮选择框代码更改

回答

相关问题