Javascript - 根据动态填充的下拉菜单转到url

Question

我创建了一个条件表单，点击提交后需要指向特定的产品页面。这可能与这个代码有关吗？我无法弄清楚如何将数组值链接到URL变量。

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

首先，您违反了DRY principle。而不是为每组产品分别设置变量，而是将它们中的每一个都存储在一种字典结构中，例如对象。

这将是我的第一次修订。

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>'); 
     }); 
    } 
} 

现在，根据您的实际问题。我们可以修改数组，以便它也包含一个url。为了简单起见，你可以有阵列数组，例如

一个：[[ “V1-1：1/4-4 900-4500＃”， “URL”]，[ “V1-1轻量紧凑的解决方案 ”， “URL”]，。 ..]

或对象数组的可读性例如

一个：[{名： “V1-1：1/4-4 900-4500＃”，URL： “URL”}，{名称： “V1-1 轻量紧凑的解决方案”， url：“url”}，...]

所以这里是我的第二次修订使用对象数组。 （我缩短词典只是为了展示插图）。

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'); 
    } 
}); 

从技术上说，你是不是“提交”形式，但只是“重定向” - 所以我不会用一个提交按钮，但只是一个普通的按钮。

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

下面是最后修订的demo。你必须修复字典。

Answer 2

你可以通过使用你已经拥有的标记，这些选定的值到产品页面，只需添加一个动作形式

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

你需要写你的产品页面根据传递的参数动态显示任何必需的信息或重定向。由于我们已经选择了上面的get方法，参数将作为查询字符串（url的一部分）的一部分传递，但您也可以使用POST。

Answer 3

我认为我会采取这种方法。存储一组对象，其中每个对象都包含该产品的产品名称和相应的URL。然后（假设您正在使用表单），您可以将表单的操作更改为所选选项的值。

备注：建议使用括号表示法（[]）而不是new Array()。您可以阅读更多关于此here和其他来源。此外，由于您的cat只会在您使用populatSelect函数时成为一个值，因此您应该使用if..else if..else if..结构。在匹配的情况下，您将完全保留if..else if表达式，节省时间。而如果你保留if..if..if..，即使你马上找到了比赛，你也必须评估他们。

编辑：你一定要遵循一些其他的答案是使用（即使用字典，这将让你找回正确的类别没有所有的if检查）的概念。

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(); 
});