使用jQuery获取输入，然后搜索数组，然后如果我的值在数组中，则输出所需的答案

Question

SO, I'm relatively new to arrays. I've tried to solve this with a few variations.

The basis of what I'm trying to do is in the title, but I'll try and explain in more detail.

I have a selection of PDFs, each PDF will be output for selection. Each PDF has an array to represent it, the array contains answers from questions that the user can select an answer for to specify which PDF suits their needs.

I have built a form --

<form class="form form-vertical specifier" method="post">

    <div class="control-group">
        <div class="input-append">
            <span class="add-on">Q1</span>
        </div>
        <label class="control-label">What is the Sub-Floor?</label>
        <select name="subFloor">
            <option value="">Please Choose</option>
            <option value="1a">Cementious Screed</option>
            <option value="1b">Anhydrite/Calcium Sulphate Screeds</option>
            <option value="1c">Timber/Chipboard</option>
            <option value="1d">Steel</option>
            <option value="1f">Selecta Screenbooard</option>
            <option value="1e">Any Other?</option>
        </select>
    </div>
    <div class="control-group">
        <div class="input-append">
            <span class="add-on">Q2</span>
        </div>
        <label class="control-label">Is there a weight issue?</label>
        <select name="weight">
            <option value="">Please Choose</option>
            <option value="2a">Yes</option>
            <option value="2b">No</option>
        </select>
    </div>

    <div class="control-group">
        <div class="input-append">
            <span class="add-on">Q3</span>
        </div>
        <label class="control-label">Is tehre a height issue?</label>
        <select name="height">
            <option value="">Please Choose</option>
            <option value="3a">Yes</option>
            <option value="3b">No</option>
        </select>
    </div>

    <div class="control-group">
        <div class="input-append">
            <span class="add-on">Q4</span>
        </div>
        <label class="control-label">Is there under-floor heating?</label>
        <select name="heating">
            <option value="">Please Choose</option>
            <option value="4a">Yes</option>
            <option value="4b">No</option>
        </select>
    </div>

    <div class="control-group">
        <div class="input-append">
            <span class="add-on">Q5</span>
        </div>
        <label class="control-label">What is the Sub-Floor</label>
        <select name="damp">
            <option value="">Please Choose</option>
            <option value="5a">Yes</option>
            <option value="5b">No</option>
        </select>
    </div>

    <div class="control-group">
        <div class="input-append">
            <span class="add-on">Q6</span>
        </div>

        <select name="acoustic">
            <option value="">Please Choose</option>
            <option value="6a">Yes</option>
            <option value="6b">No</option>
        </select>
    </div>

    <input type="submit" name="submit" >

</form>

The form values represent the question number and then a unique letter that can be associated in an array.

The arrays look like this --

$pdfs = array( 
    array('pdf01', 'a', 'a', 'a', 'b', 'a', 'a'),
    array('pdf02', 'a', 'a', 'a', 'b', 'a', 'a'),
    array('pdf03', 'a', 'a', 'a', 'a', 'b', 'a'),
    array('pdf04', 'a', 'a', 'a', 'a', 'a', 'a'),
    array('pdf05', 'a', 'b', 'b', 'a', 'b', 'b'),
    array('pdf06', 'c', 'a', 'a', 'b', 'b', 'a'),
    array('pdf07', 'a', 'a', 'a', 'b', 'b', 'a'),
    array('pdf08', 'f', 'b', 'b', 'b', 'b', 'b'),
    array('pdf09', 'f', 'b', 'b', 'b', 'b', 'b'),
    array('pdf10', 'a', 'b', 'b', 'b', 'a', 'b'),
    array('pdf11', 'a', 'b', 'a', 'b', 'a', 'b'),
    array('pdf12', 'b', 'b', 'b', 'a', 'b', 'b'),
    array('pdf13', 'g', 'b', 'b', 'a', 'a', 'b'),
    array('pdf14', 'a', 'b', 'b', 'a', 'a', 'b'),
    array('pdf15', 'd', 'a', 'a', 'b', 'b', 'a')
);`

From this I need to be able to output the PDF name if the input value matches what's in the array.

Any help or pushes in the right direction would be extremely appreciated.

fyi, I'm trying to keep this dynamic so,

$('selector').change(function() {
}) 

is, I'm presuming, the approach I need.

Answer 1

I'd create a json instead of an array. Something along the line of

jsonObj = { aaabaa: 'pdf01', aaabab: 'pdf02', .... }

Then you can just put your answers together as a string and look it up in the json object:

var pdf = jsonObj[answerString]

For finding all PDFs matching a non complete string it gets a little complicated:

1. Build a regular expression. For each not given answer, insert \\w. So that it looks like this: var regEx = /aa\\wb\\w/ (read as a, a, not set, b, not set). To dynamically construct a regular expression you first create it as a string with escaped backslashes: var regExString = "aa\\\\wb\\\\w" in this case. Then give it to a new RegExp object: var regEx = new RegExp(regExString)

2. Iterate through your object and check the keys:

   var result = []; for (key in jsonObj) { if (regEx.test(key)) { result.push(jsonObj[key]); } }

And then you finally have an array ;) But only with the valid PDFs.

But with this approach you lose the advantage of a fast and efficient solution. You could also iterate through your array then and pick only the valid elements. It is just a little less code with this solution.

JSFiddle for a working demo.