Question

I’m making a custom computer builder for my site like you see on dell and the likes.

Basically you can choose you processor, the html for them look like this:

<div class="process_intel_options" style="display:block">
    <label class="option">
        <input type="radio" name="processor_options" value="124" data-price="195.82"  data-socket="1366"  class="calculation-item"  id="intel_options_0" checked="checked"  />
        Intel Core i7 960 3.20Ghz (Nehalem) <span class="item_price positive">+0</span> </label>
    <br />
    <label class="option">
        <input type="radio" name="processor_options" value="149" data-price="250.00"  data-socket="1155"  class="calculation-item"  />
        Processor socket 1155 <span class="item_price positive">+0</span> </label>
    <br />
    <label class="option">
        <input type="radio" name="processor_options" value="125" data-price="359.99"  data-socket="1366"  class="calculation-item"  />
        Intel Core i7 980 3.33Ghz (Gulftown) <span class="item_price positive">+0</span> </label>
    <br />
</div>
<div class="process_amd_options" style="display:none">
    <label class="option">
        <input type="radio" name="processor_options" value="126" data-price="133.32"  data-socket="am3"  class="calculation-item"  id="amd_options_0"  />
        AMD Bulldozer FX-8 Eight Core 8120 3.10Ghz <span class="item_price positive">+0</span> </label>
    <br />
    <label class="option">
        <input type="radio" name="processor_options" value="127" data-price="162.99"  data-socket="am3"  class="calculation-item"  />
        AMD Bulldozer FX-8 Eight Core 8150 3.60Ghz <span class="item_price positive">+0</span> </label>
</div>

Notice the attribute data-socket.

You can then select the motherboard:

<div class="mobo_options">
    <label class="option">
        <input type="radio" name="motherboard_options" value="145" data-price="178.00" data-socket="1155"  class="calculation-item"  id="mobo_options_0" checked="checked"  />
        Motherboard 1 socket 1155 <span class="item_price positive">+0</span> </label>
    <br />
    <label class="option">
        <input type="radio" name="motherboard_options" value="146" data-price="180.00" data-socket="1155"  class="calculation-item"  />
        Motherboard 2 socket 1155 <span class="item_price positive">+0</span> </label>
    <br />
    <label class="option">
        <input type="radio" name="motherboard_options" value="147" data-price="190.00" data-socket="1366"  class="calculation-item"  />
        Motherboard 3 socket 1366 <span class="item_price positive">+0</span> </label>
    <br />
    <label class="option">
        <input type="radio" name="motherboard_options" value="148" data-price="200.00" data-socket="2011"  class="calculation-item"  />
        Motherboard 4 socket 2011 <span class="item_price positive">+0</span> </label>
    <br />
</div>

This also has data-socket.

I’m looking for a query script that will only show the motherboards that have the correct socket type as the processors, for example, if a processor is selected with data-socket="1155" then only motherboards with data-socket="1155" will be shown (also the first one needs to be selected in case they select a different processor.

Can anyone help me?

Answer 1

Something like this should do it:

$('input:radio[name="processor_options"]').change(function(e) {
    var socket = $(this).data('socket');
    $('div.mobo_options input:radio[data-socket!="' + socket + '"]').hide();
    $('div.mobo_options input:radio[data-socket="' + socket + '"]').show().get(0).checked = true;
});

Note that it only hides the <input type="radio"> elements, not the text that accompanies them. You might want to wrap it in another element (such as an <li> inside an <ul>) that you could hide instead, so the accompanying text is hidden as well.

DEMO

---

Just noticed you have the <input> elements wrapped in <label> elements, so you could use the following code instead to hide the text as well:

$('input:radio[name="processor_options"]').change(function(e) {
    var socket = $(this).data('socket');
    $('div.mobo_options input:radio[data-socket!="' + socket + '"]').closest('label').hide();
    $('div.mobo_options input:radio[data-socket="' + socket + '"]').closest('label').show().end().get(0).checked = true;
});

Updated DEMO