Home/ Questions/Q 7927671
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T19:26:27+00:00

i have my script working but currently it used a button input, i want

  • 0

i have my script working but currently it used a button input, i want to change it to a select box input, but i cant seem the get the code to work at all, please help 

<!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>

And change the “fuel” buttons to 

<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>

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There’s a lot in this question that needs to be improved upon, but this should give you immediate results:

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

    You would need to repeat the same for the other select elements as well.

    Update with a few more changes:

    There are several issues with this code which could cause you some frustration in the future. I took the liberty to re-write it a bit. Granted there may still be some room for improvement, but I think it will get you a step closer to something more easily handled and understood.

    I start by storing all of the filterable criteria inside a single object, rather than several variables. This gives us one place to push and pull values.

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

    Next I’m creating a small regular expression pattern that will find keywords within a predefined CSS selector. The function, partsMapper, will be responsible for swapping out the keywords that the regex discovers with the actual values from the fType object above.

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

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

    Next, I’ve grouped all of your select elements into a single <div class='controller'> so that we can more easily capture their change events all from one place.

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

    When the change event of a select fires, from within .controller, we’re start by updating the value for that change event in our fType object. So if #fuel was changed, we’ll be updating fType[fuel] to the new value.

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

    With our fType object freshly updated, we can update our list of items. We start by hiding all of the list items (yeah, I restructured here as well). Next we select only the list items that match a .fuel.drive.type selector, where each of those keywords is found and replaced by our regular expression/function combo with the present value in the fType object.

    So if fType.fuel is "petrol", then our selector will begin with .petrol. All of the criteria were set to "all" by default, so once you change #fuel to petrol, our selector will immediately become .petrol.all.all, which shows all .petrol items.

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

    Lastly we close up our $.on method.

    });

    Demo: http://jsbin.com/imezez/edit#javascript,html

    • 0