Javascript-基于动态填充的下拉菜单的url

Question

I've created a condition form that needs to direct to a specific product page after clicking submit. Is that possible to do with this code? I'm having trouble figuring out how to link the array values to a URL variable.

Here's the JSFiddle

a=new Array("V1-1: 1/4-4 900-4500#", "V1-1 Light-Weight Compact Solution", "V1-2: 1/2-36 150-600#","V1-3: 1/2-2, 150-600#","V1-4: 4-36 900-4500#");
b=new Array('NexTech® R Series Valves','NexTech® E Series Valves','TrunTech® Valves', 'PulseJet Valves');
c=new Array('Coking Isolation Valves','Coking Switch Valves');
d=new Array('Three-Way Valves','Four-Way Valves');
e=new Array('IsoTech®');
f=new Array('Xactrol® Mark I Valves', 'Xactrol® Mark II Valves', 'Xactrol® Mark III Valves');
g=new Array('PulseJet Valves','Ecopack®');
h=new Array('AbrasoCheck® Slurry Check Valves', 'AbrasoTech® Slurry Ball Valves');
i=new Array('Electronic Relief Valves');
j=new Array('ValvXpress® Automated Valve Packages');
k=new Array('Acid Injection Valves');
l=new Array('Double Block-and-Bleed Valves');
m=new Array('Turbine Bypass System');
n=new Array('Check Valves');
o=new Array('ValvXpress®','EcoPack®','ValvPerformance Testing®','Slurry Valves','Acid Injection Valves','Double Block-and-bleed Valves','Rhinoite® Hardfacing','Switch Valves','HVOF RiTech®','Cryogenic Valves');

populateSelect();

$(function() {

      $('#cat').change(function(){
        populateSelect();
    });

});


function populateSelect(){
    cat=$('#cat').val();
    $('#item').html('');


    if(cat=='a'){
        a.forEach(function(t) { 
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='b'){
        b.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='c'){
        c.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='d'){
        d.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='e'){
        e.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='f'){
        f.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='g'){
        g.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='h'){
        h.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }


    if(cat=='i'){
        i.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='j'){
        j.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='k'){
        k.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='l'){
        l.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='m'){
       m.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='n'){
        n.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='o'){
        o.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }





} 

Answer 1

First, you are violating the DRY principle . Instead of having separate variables for each set of products, store each of them in a sort of dictionary structure such as an object.

This would be my first revision .

var dict = {
    a: ["V1-1: 1/4-4 900-4500#", "V1-1 Light-Weight Compact Solution", "V1-2: 1/2-36 150-600#","V1-3: 1/2-2, 150-600#","V1-4: 4-36 900-4500#"],
    b: ['NexTech® R Series Valves','NexTech® E Series Valves','TrunTech® Valves', 'PulseJet Valves'],
    c: ['Coking Isolation Valves','Coking Switch Valves'],
    d: ['Three-Way Valves','Four-Way Valves'],
    e: ['IsoTech®'],
    f: ['Xactrol® Mark I Valves', 'Xactrol® Mark II Valves', 'Xactrol® Mark III Valves'],
    g: ['PulseJet Valves','Ecopack®'],
    h: ['AbrasoCheck® Slurry Check Valves', 'AbrasoTech® Slurry Ball Valves'],
    i: ['Electronic Relief Valves'],
    j: ['ValvXpress® Automated Valve Packages'],
    k: ['Acid Injection Valves'],
    l: ['Double Block-and-Bleed Valves'],
    m: ['Turbine Bypass System'],
    n: ['Check Valves'],
    o: ['ValvXpress®','EcoPack®','ValvPerformance Testing®','Slurry Valves','Acid Injection Valves','Double Block-and-bleed Valves','Rhinoite® Hardfacing','Switch Valves','HVOF RiTech®','Cryogenic Valves']
};

$(function() {
    // attach an 'change' event handler
    // THEN trigger the event handler to call the function from the start
    $('#cat').change(populateSelect).trigger('change');
});

function populateSelect() {
    // this refers to the current element
    // get the selected value
    var cat = this.value;
    // always a good idea to cache your element that you will be re-using (maybe move it outside the function too)
    var items = $('#item');

    items.html('');
    // check if there are products associated with the selected value
    if (dict.hasOwnProperty(cat)) {
        // show products
        dict[cat].forEach(function(product) { 
            items.append('<option>' + product + '</option>');
        });
    }
}

Now, in terms of your actual problem. We can modify the arrays, so that it also includes a url. You could have arrays of arrays for simplicity eg

a: [["V1-1: 1/4-4 900-4500#", "url"], ["V1-1 Light-Weight Compact Solution", "url"], ...]

or arrays of objects for readability eg

a: [{ name: "V1-1: 1/4-4 900-4500#", url: "url" }, { name: "V1-1 Light-Weight Compact Solution", url: "url"}, ...]

So here's my second revision using arrays of objects. (I shorten the dictionary just to show illustration).

var dict = {
    a: [
        { 
            name: "V1-1: 1/4-4 900-4500#",
            url: "http://www.bing.com"
        },
        {
            name: "V1-1 Light-Weight Compact Solution", 
            url: "http://www.google.com"
        },
        {
            name: "V1-2: 1/2-36 150-600#",
            url: "http://www.yahoo.com"
        },
    ],
    b: [
        {
            name: 'NexTech® R Series Valves',
            url: 'http://www.nike.com'
        },
        {
            name: 'NexTech® E Series Valves',
            url: 'http://www.walmart.com'
        }
    ],
    c: [{
        name: 'Coking Isolation Valves',
        url: 'http://www.adidas.com'
    }],
};

$(function() {
    // cache element so that you don't re-search the DOM multiple times
    var $items = $('#item');

    $('#cat').change(populateSelect).trigger('change');
    $('#goto').click(redirectToURL);

    // place the functions within the document.ready so that they have access to the cached elements
    function populateSelect() {
        $items.html('');
        if (dict.hasOwnProperty(this.value)) {
            dict[this.value].forEach(function(product) {
                // you can store the URL in HTML5-data attribute to use it later
                $items.append('<option data-url="' + product.url + '">' + product.name +'</option>');
            });
        }
    }

    function redirectToURL() {
        // get the URL from the selected option's data-url and redirect to it
        window.location.href = $items.find(':selected').data('url');
    }
});

Technically, you are not "submitting" a form but just "redirecting" -- so I would not use a submit button but just an ordinary button.

<input type="button" id="goto" value="submit">

Below is a demo of the final revision. You'll have to fix the dictionary.

Answer 2

You can pass these selected values to a product page using the markup you already have, just add an action to the form

<form action="yourpageurl" method="get">

You need to write your product page to dynamically show whatever information is necessary or redirect based on the parameters passed through. As we have selected the get method above, the parameters would be passed as part of a query string (part of the url) but you could also use POST.

Answer 3

I think that I would take this approach. Store an array of objects, each of which contain the product name and the appropriate url for that product. Then (assuming you are using a form) you can change the action of form to the value of the selected option.

Side notes: It's recommended to use the bracket notation ( [] ) instead of new Array() . You can read more about this here and at other sources. Also, since your cat will only ever be one value when you're in the populatSelect function, you should use the if..else if..else if.. structure. In the case of a match, you will leave the if..else if expression completely, saving time. Whereas if you kept if..if..if.. , you would have to evaluate all of them even if you found a match right away.

EDIT : You should definitely follow the concepts that some of the other answers are using (namely using a dictionary, which will allow you to retrieve the correct category without all the if checks).

var cats = {
  a: [
       { product: 'V1-1: 1/4-4 900-4500#', url: '<product url>' },
       { product: 'V1-1 Light-Weight Compact Solution', url: '<product url>' },
       { product: 'V1-2: 1/2-36 150-600#', url: '<product url>' },
       { product: 'V1-3: 1/2-2, 150-600#', url: '<product url>' },
       { product: 'V1-4: 4-36 900-4500#', url: '<product url>' }
  ],
  b: [
       { product: 'NexTech® R Series Valves', url: '<product url>'},
       { product: 'NexTech® E Series Valves', url: '<product url>' },
       { product: 'TrunTech® Valves', url: '<product url>' },
       { product: 'PulseJet Valves', url: '<product url>' }
  ],

// same for the rest of your categories
};

populateSelect();

$(function() {
    $('#cat').change(function(){
        populateSelect();
    });
});


function populateSelect(){
    var cat = $('#cat').val();
    $('#item').html('');

    appendProducts(cats[cat]);
}

function appendProducts(arr) {
    arr.forEach(function(t) {
            $('#item').append('<option value="' + t.url + '">'+ t.product +'</option>');
        });
}

$('form').submit(function() {
    this.action = $('select').find(':selected').val();
});