SO - 20851242

by Arun P Johny

HTML

<form name="searchForm" id="searchForm">
    <select name="diameter">
        <option value="" selected="">Select One</option>
        <option value="1.2">1.2</option>
        <option value="1.75">1.75</option>
        <option value="2.2">2.2</option>
    </select>
    <select name="accuracy">
        <option value="" selected="">Select One</option>
        <option value="0.15 deg">0.15</option>
        <option value="0.5 deg">0.5</option>
        <option value="1 deg">1</option>
        <option value="2.5 deg">2.5</option>
    </select>
    <select name="temp">
        <option value="" selected="">Select One</option>
        <option value="257F">257F</option>
        <option value="300F">300F</option>
        <option value="400F">400F</option>
    </select>
    <select name="modeOptions">
        <option value="" selected="">Select One</option>
        <option value="surface-readout-ms">Surface Readout/MS</option>
        <option value="wireline-orientation">Wireline Orientation</option>
        <option value="memory-orientation">Memory Orientation</option>
        <option value="slickline-memory">Slickline memory</option>
        <option value="drop-controlled-descent">Drop – Controlled Descent</option>
        <option value="drop–freefall-descent">Drop – Freefall Descent</option>
        <option value="seated-wireline-steering">Seated Wireline Steering</option>
    </select>
    <input type="submit" value="submit" />
</form>
<div id="result"></div>

JavaScript

jQuery(function ($) {
    var data = {
        "Product": {
            "url": ["http://www.google.com"],
            "mode": ["gyro"],
            "modeOptions": ["drop-controlled-descent", "seated-wireline-steering", "slickline-memory", "surface-readout-ms", "wireline-orientation"],
            "diameter": {
                "usa": "1.75",
                "intl": "44.5mm"
            },
            "accuracy": {
                "usa": "0.5 deg",
                "intl": "0.5 deg"
            },
            "temp": {
                "usa": "400F",
                "intl": "204C"
            },
            "speed": {
                "usa": "250 ft\/min",
                "intl": "76.2m\/min"
            }
        },
        "Service": {
            "url": ["http://www.google.com"],
            "mode": ["gyro"],
            "modeOptions": ["drop-controlled-descent", "seated-wireline-steering", "slickline-memory", "surface-readout-ms", "wireline-orientation"],
            "diameter": {
                "usa": "(2.2)",
                "intl": "(55.9mm)"
            },
            "accuracy": {
                "usa": "0.15 deg",
                "intl": "0.15 deg"
            },
            "temp": {
                "usa": "(400F)",
                "intl": "(204C)"
            },
            "speed": {
                "usa": "600 ft\/min",
                "intl": "182.9m\/min"
            }
        }
    };
    
    var $form = $('#searchForm'),
        $diameter = $form.find('select[name="diameter"]'),
        $accuracy = $form.find('select[name="accuracy"]'),
        $temp = $form.find('select[name="temp"]'),
        $modeOptions = $form.find('select[name="modeOptions"]');
    $('#searchForm').submit(function (e) {
        e.preventDefault();
        var diameter = $diameter.val(),
            accuracy = $accuracy.val(),
            temp = $temp.val(),
            modeOptions = $modeOptions.val();
        
        var selected = $.map(data, function (obj) {
           ...